*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}:root{--primary:#0b1521;--primary-rgb:170,5,14;--accent:#F9B233;--accent-rgb:249,178,51;--accent-hover:#df8e00;--surface:#FEF0D6;--surface-rgb:254,240,214;--surface-dark:#111111;--surface-dark-rgb:17,17,17;--text:#2C2C2C;--text-light:#555555;--white:#FFFFFF;--white-rgb:255,255,255;--border:rgba(170,5,14,0.1);--shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 8px 30px rgba(0,0,0,0.1);--shadow-lg:0 20px 60px rgba(0,0,0,0.15);--shadow-gold:0 8px 30px rgba(249,178,51,0.25);--font-heading:'Montserrat',sans-serif;--font-body:'Raleway',sans-serif;--section-padding:clamp(4rem,8vw,8rem);--container-max:1280px;--container-padding:clamp(1.25rem,4vw,2.5rem);--transition-fast:0.2s cubic-bezier(0.4,0,0.2,1);--transition-base:0.35s cubic-bezier(0.4,0,0.2,1);--transition-slow:0.6s cubic-bezier(0.4,0,0.2,1);--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;}html{scroll-behavior:smooth;scroll-padding-top:90px;}body{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--text);background-color:var(--surface);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.2;color:var(--primary);font-weight:700;}h1{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;letter-spacing:-0.02em;}h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:-0.01em;}h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:600;}p{color:var(--text-light);max-width:70ch;}a{text-decoration:none;color:inherit;transition:color var(--transition-fast);}img{max-width:100%;height:auto;display:block;}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);}.section-label{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-heading);font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;color:var(--accent);margin-bottom:1rem;}.section-label::before{content:'';display:inline-block;width:32px;height:2px;background:var(--accent);}.section-title{margin-bottom:1.25rem;}.section-description{font-size:1.1rem;line-height:1.8;max-width:600px;}.text-center{text-align:center;}.text-center .section-description{margin:0 auto;}.accent-text{color:var(--accent);}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:1rem 2.25rem;font-family:var(--font-heading);font-size:0.95rem;font-weight:600;letter-spacing:0.03em;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-base);text-transform:uppercase;position:relative;overflow:hidden;}.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.15);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.5s,height 0.5s;}.btn:hover::after{width:300px;height:300px;}.btn-primary{background:var(--accent);color:var(--primary);box-shadow:var(--shadow-gold);}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 40px rgba(249,178,51,0.35);}.btn-outline{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.4);}.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:var(--white);transform:translateY(-2px);}.btn-dark{background:var(--primary);color:var(--white);}.btn-dark:hover{background:#243658;transform:translateY(-2px);box-shadow:var(--shadow-md);}.btn-icon{font-size:1.1rem;transition:transform var(--transition-fast);}.btn:hover .btn-icon{transform:translateX(4px);}.site-header{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:all var(--transition-base);padding:0.75rem 0;}.site-header.scrolled{background:#AA050E;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 30px rgba(0,0,0,0.2);padding:0.5rem 0;}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;}.logo{display:flex;align-items:center;gap:0.75rem;z-index:1001;}.header-logo-img{height:clamp(45px,6vw,60px);width:auto;object-fit:contain;transition:transform 0.3s ease;}.logo:hover .header-logo-img{transform:scale(1.02);}.main-nav{display:flex;align-items:center;gap:0.25rem;}.nav-link{padding:0.5rem 1rem;font-family:var(--font-body);font-size:0.9rem;font-weight:500;color:rgba(255,255,255,0.75);border-radius:var(--radius-sm);transition:all var(--transition-fast);position:relative;}.nav-link::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);transition:all var(--transition-base);transform:translateX(-50%);}.nav-link:hover,.nav-link.active{color:var(--white);}.nav-link:hover::after,.nav-link.active::after{width:60%;}.header-cta{padding:0.65rem 1.5rem;font-size:0.85rem;}.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:0.5rem;z-index:1001;}.menu-toggle span{display:block;width:26px;height:2px;background:var(--white);transition:all var(--transition-base);border-radius:2px;}.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}.menu-toggle.active span:nth-child(2){opacity:0;}.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}.announcement-bar{background:var(--accent);color:var(--primary);text-align:center;padding:0.5rem 1rem;font-size:0.85rem;font-weight:600;font-family:var(--font-heading);position:fixed;top:0;left:0;width:100%;z-index:1100;transform:translateY(-100%);transition:transform var(--transition-base);}.announcement-bar.visible{transform:translateY(0);}.announcement-bar a{color:var(--primary);text-decoration:underline;font-weight:700;}.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--surface-dark);}.hero-background{position:absolute;inset:0;z-index:1;}.hero-background img{width:100%;height:100%;object-fit:cover;object-position:center;}.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0.90) 0%,rgba(0,0,0,0.70) 40%,rgba(0,0,0,0.45) 100%);z-index:2;}.hero-content{position:relative;z-index:3;padding-top:6rem;max-width:700px;}.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1.25rem;background:rgba(249,178,51,0.15);border:1px solid rgba(249,178,51,0.3);border-radius:100px;font-size:0.85rem;font-weight:600;color:var(--accent);margin-bottom:1.5rem;font-family:var(--font-heading);}.hero-badge-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:pulse-dot 2s infinite;}@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.3);}}.hero h1{color:var(--white);margin-bottom:1.5rem;}.hero h1 .highlight{color:var(--accent);position:relative;}.hero-description{font-size:1.2rem;color:rgba(255,255,255,0.7);margin-bottom:2.5rem;max-width:550px;line-height:1.8;}.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3.5rem;}.hero-stats{display:flex;gap:3rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,0.1);}.hero-stat{text-align:left;}.hero-stat-number{font-family:var(--font-heading);font-size:2.5rem;font-weight:800;color:var(--accent);line-height:1;margin-bottom:0.25rem;}.hero-stat-label{font-size:0.85rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.1em;font-weight:500;}.trust-bar{background:var(--primary);padding:2rem 0;position:relative;z-index:5;}.trust-bar-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;}.trust-item{display:flex;align-items:center;gap:0.75rem;color:rgba(255,255,255,0.8);font-size:0.9rem;font-weight:500;}.trust-icon{font-size:1.5rem;color:var(--accent);flex-shrink:0;}.trust-text{font-family:var(--font-heading);letter-spacing:0.03em;}.services{padding:var(--section-padding) 0;background:var(--surface);}.services-header{margin-bottom:3.5rem;}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}.service-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);transition:all var(--transition-base);cursor:pointer;group:true;}.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}.service-card-image{position:relative;height:240px;overflow:hidden;}.service-card-image img,.service-card-image video{width:100%;height:100%;object-fit:cover;object-position:center 40%;transition:transform var(--transition-slow);}.service-card:hover .service-card-image img,.service-card:hover .service-card-image video{transform:scale(1.08);}.service-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 60%);}.service-card-body{padding:1.75rem;}.service-card-title{font-size:1.3rem;margin-bottom:0.75rem;color:var(--primary);}.service-card-text{font-size:0.95rem;color:var(--text-light);margin-bottom:1.25rem;line-height:1.7;}.service-card-link{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-heading);font-size:0.9rem;font-weight:600;color:var(--accent);transition:gap var(--transition-fast);}.service-card:hover .service-card-link{gap:0.75rem;}.quote-values{background:var(--surface);overflow:hidden;position:relative;}.quote-values-wrapper{position:relative;max-width:100%;margin:0 auto;padding:clamp(5rem,10vw,8rem) clamp(2rem,5vw,4rem);min-height:580px;display:flex;align-items:center;justify-content:center;}.quote-values-content{position:relative;z-index:2;width:100%;max-width:1400px;margin:0 auto;display:flex;justify-content:center;}.quote-text-block{position:relative;display:inline-block;}.quote-values-text{font-family:var(--font-heading);font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:900;color:#a01010;line-height:1.1;letter-spacing:-0.02em;margin:0;border:none;padding:0;text-align:center;}.value-badge{position:absolute;display:inline-block;padding:0.5rem 1.25rem;background:#e94e1b;color:var(--white);font-family:var(--font-heading);font-size:clamp(0.7rem,1.1vw,0.95rem);font-weight:700;letter-spacing:0.03em;border-radius:6px;box-shadow:0 4px 16px rgba(233,78,27,0.35);cursor:default;white-space:nowrap;z-index:3;transition:transform var(--transition-base),box-shadow var(--transition-base);}.value-badge:hover{box-shadow:0 8px 25px rgba(233,78,27,0.5);}.value-badge-1{top:14%;left:8%;animation:badge-float-1 4.5s ease-in-out infinite;}.value-badge-2{top:28%;right:5%;animation:badge-float-2 4s ease-in-out 0.8s infinite;}.value-badge-3{top:74%;left:12%;animation:badge-float-3 4.2s ease-in-out 1.4s infinite;}.value-badge-4{top:76%;right:8%;animation:badge-float-4 3.8s ease-in-out 2s infinite;}@keyframes badge-float-1{0%,100%{transform:translate(0,0) rotate(-2deg);}50%{transform:translate(3px,-8px) rotate(0deg);}}@keyframes badge-float-2{0%,100%{transform:translate(0,0) rotate(1deg);}50%{transform:translate(-4px,-7px) rotate(-1deg);}}@keyframes badge-float-3{0%,100%{transform:translate(0,0) rotate(-1deg);}50%{transform:translate(5px,-6px) rotate(1deg);}}@keyframes badge-float-4{0%,100%{transform:translate(0,0) rotate(1deg);}50%{transform:translate(-3px,-9px) rotate(-1deg);}}.quote-values-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;overflow:hidden;}.quote-values-bg img{position:absolute;right:0;top:-5px;height:calc(100%+10px);width:auto;max-width:none;display:block;border:none;outline:none;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.3) 15%,black 35%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.3) 15%,black 35%);}.quote-values-bg-left{position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;pointer-events:none;overflow:hidden;}.quote-values-bg-left img{position:absolute;left:0;bottom:0;height:85%;width:auto;max-width:none;display:block;border:none;outline:none;-webkit-mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,0.3) 10%,black 30%);mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,0.3) 10%,black 30%);}@media (max-width:1200px){.quote-values-bg,.quote-values-bg-left{opacity:0.7;}}@media (max-width:900px){.quote-values-wrapper{min-height:450px;padding:clamp(3.5rem,7vw,5rem) clamp(1.5rem,4vw,3rem);}.quote-values-bg,.quote-values-bg-left{opacity:0.5;}.quote-values-text{font-size:clamp(1.8rem,5vw,3rem);}.value-badge{font-size:0.7rem;padding:0.4rem 0.9rem;}}@media (max-width:600px){.quote-values-wrapper{min-height:auto;padding:clamp(3rem,6vw,4rem) 1rem;}.quote-values-bg,.quote-values-bg-left{display:none;}.quote-values-text{font-size:clamp(1.6rem,7vw,2.2rem);text-align:center;line-height:1.4;}.value-badge{font-size:0.65rem;padding:0.35rem 0.8rem;}.value-badge-1{top:15%;left:0%;}.value-badge-2{top:35%;right:0%;}.value-badge-3{top:65%;left:0%;}.value-badge-4{top:85%;right:0%;}}.about{padding:var(--section-padding) 0;background:var(--white);}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}.about-image-wrapper{position:relative;}.about-image{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}.about-image img{width:100%;height:500px;object-fit:cover;object-position:center 25%;}.about-experience-badge{position:absolute;bottom:-1.5rem;right:-1.5rem;width:140px;height:140px;background:var(--accent);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-gold);z-index:2;}.about-experience-number{font-family:var(--font-heading);font-size:2.8rem;font-weight:800;color:var(--primary);line-height:1;}.about-experience-text{font-size:0.7rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.1em;text-align:center;line-height:1.2;}.about-content{padding:1rem 0;}.about-text{margin-bottom:2rem;}.about-text p{margin-bottom:1rem;font-size:1.05rem;}.about-features{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:2.5rem;}.about-feature{display:flex;align-items:flex-start;gap:0.75rem;}.about-feature-icon{width:36px;height:36px;background:rgba(249,178,51,0.12);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;color:var(--accent);}.about-feature-text{font-size:0.95rem;font-weight:600;color:var(--primary);line-height:1.4;}.why-us{padding:var(--section-padding) 0;background:#e94e1b;position:relative;overflow:hidden;}.why-us::before{content:'';position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(249,178,51,0.08) 0%,transparent 70%);border-radius:50%;}.why-us .section-label{color:var(--accent);}.why-us .section-title{color:var(--white);}.why-us .section-description{color:rgba(255,255,255,0.6);}.why-us-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.5rem;}.why-us-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center;transition:all var(--transition-base);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}.why-us-card:hover{background:rgba(255,255,255,0.08);border-color:rgba(249,178,51,0.3);transform:translateY(-6px);}.why-us-icon{font-size:2.5rem;margin-bottom:1.25rem;display:block;color:var(--accent);}.why-us-number{font-family:var(--font-heading);font-size:3rem;font-weight:800;color:#ffffff;line-height:1;margin-bottom:0.5rem;}.why-us-label{font-size:0.95rem;color:rgba(255,255,255,0.6);font-weight:500;}.projects{padding:var(--section-padding) 0;background:var(--surface);}.projects-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;gap:2rem;}.projects-filters{display:flex;gap:0.5rem;flex-wrap:wrap;}.filter-btn{padding:0.5rem 1.25rem;font-family:var(--font-heading);font-size:0.85rem;font-weight:600;color:var(--text-light);background:transparent;border:1px solid var(--border);border-radius:100px;cursor:pointer;transition:all var(--transition-fast);}.filter-btn:hover,.filter-btn.active{background:var(--primary);color:var(--white);border-color:var(--primary);}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}.project-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;aspect-ratio:4/3;}.project-card img,.project-card video{width:100%;height:100%;object-fit:cover;object-position:center 40%;transition:transform var(--transition-slow);}.project-card:hover img,.project-card:hover video{transform:scale(1.1);}.project-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,transparent 60%);opacity:0;transition:opacity var(--transition-base);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;}.project-card:hover .project-card-overlay{opacity:1;}.project-card-title{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;color:var(--white);margin-bottom:0.25rem;}.project-card-category{font-size:0.85rem;color:var(--accent);font-weight:500;}.testimonials{padding:var(--section-padding) 0;background:var(--white);}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;}.testimonial-card{background:var(--surface);border-radius:var(--radius-lg);padding:2.5rem;position:relative;transition:all var(--transition-base);border:1px solid transparent;}.testimonial-card:hover{border-color:rgba(249,178,51,0.2);box-shadow:var(--shadow-md);transform:translateY(-4px);}.testimonial-stars{display:flex;gap:0.2rem;margin-bottom:1.25rem;color:var(--accent);font-size:1.1rem;}.testimonial-text{font-size:1.05rem;color:var(--text);line-height:1.8;margin-bottom:1.5rem;font-style:italic;}.testimonial-author{display:flex;align-items:center;gap:0.75rem;}.testimonial-avatar{width:48px;height:48px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;color:var(--accent);font-size:1.1rem;}.testimonial-name{font-family:var(--font-heading);font-weight:600;color:var(--primary);font-size:1rem;}.testimonial-location{font-size:0.85rem;color:var(--text-light);}.process{padding:var(--section-padding) 0;background:var(--surface);}.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.5rem;position:relative;}.process-steps::before{content:'';position:absolute;top:50px;left:10%;width:80%;height:2px;background:linear-gradient(to right,var(--accent),rgba(249,178,51,0.2));z-index:0;}.process-step{text-align:center;position:relative;z-index:1;}.process-step-number{width:60px;height:60px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:1.5rem;font-weight:800;color:var(--primary);margin:0 auto 1.5rem;box-shadow:var(--shadow-gold);position:relative;}.process-step-title{font-size:1.15rem;margin-bottom:0.75rem;color:var(--primary);}.process-step-text{font-size:0.95rem;color:var(--text-light);line-height:1.7;}.cta-section{padding:var(--section-padding) 0;background:rgb(233,78,27);position:relative;overflow:hidden;}.cta-section::before{content:'';position:absolute;bottom:-30%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(249,178,51,0.1) 0%,transparent 70%);border-radius:50%;}.cta-section::after{content:'';position:absolute;top:-20%;right:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(249,178,51,0.06) 0%,transparent 70%);border-radius:50%;}.cta-inner{text-align:center;position:relative;z-index:2;max-width:700px;margin:0 auto;}.cta-inner h2{color:var(--white);margin-bottom:1.25rem;}.cta-inner p{color:rgba(255,255,255,0.65);font-size:1.15rem;margin:0 auto 2.5rem;max-width:500px;}.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}.contact{padding:var(--section-padding) 0;background:var(--white);}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3rem;}.contact-info{display:flex;flex-direction:column;gap:2rem;}.contact-item{display:flex;gap:1rem;align-items:flex-start;}.contact-item-icon{width:52px;height:52px;background:rgba(249,178,51,0.1);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--accent);flex-shrink:0;}.contact-item-content h4{font-size:1.05rem;color:var(--primary);margin-bottom:0.25rem;}.contact-item-content p{font-size:0.95rem;color:var(--text-light);}.contact-form{background:var(--surface);border-radius:var(--radius-lg);padding:2.5rem;}.form-group{margin-bottom:1.25rem;}.form-group label{display:block;font-family:var(--font-heading);font-size:0.9rem;font-weight:600;color:var(--primary);margin-bottom:0.5rem;}.form-group input,.form-group select,.form-group textarea{width:100%;padding:0.85rem 1.15rem;font-family:var(--font-body);font-size:0.95rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--white);color:var(--text);transition:all var(--transition-fast);outline:none;}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(249,178,51,0.1);}.form-group textarea{resize:vertical;min-height:120px;}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}.form-submit{width:100%;margin-top:0.5rem;}.site-footer{background:var(--surface-dark);padding:4rem 0 0;}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.08);}.footer-brand{max-width:320px;}.footer-logo-img{height:50px;width:auto;object-fit:contain;margin-bottom:1rem;}.footer-brand p{color:rgba(255,255,255,0.7);font-size:0.95rem;line-height:1.7;margin-bottom:1.5rem;}.footer-social{display:flex;gap:0.75rem;}.social-link{width:42px;height:42px;border:1px solid rgba(255,255,255,0.15);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);font-size:1.1rem;transition:all var(--transition-fast);}.social-link:hover{background:var(--accent);border-color:var(--accent);color:var(--primary);}.footer-heading{font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:1.25rem;letter-spacing:0.03em;}.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.75rem;}.footer-links a{color:rgba(255,255,255,0.5);font-size:0.9rem;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:0.25rem;}.footer-links a:hover{color:var(--accent);transform:translateX(4px);}.footer-contact-item{display:flex;gap:0.75rem;align-items:flex-start;margin-bottom:1rem;}.footer-contact-icon{color:var(--accent);font-size:1rem;margin-top:0.2rem;flex-shrink:0;}.footer-contact-text{color:rgba(255,255,255,0.5);font-size:0.9rem;line-height:1.5;}.footer-bottom{padding:1.5rem 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}.footer-copyright{color:rgba(255,255,255,0.35);font-size:0.85rem;}.footer-legal{display:flex;gap:1.5rem;}.footer-legal a{color:rgba(255,255,255,0.35);font-size:0.85rem;transition:color var(--transition-fast);}.footer-legal a:hover{color:var(--accent);}.scroll-top{position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;background:var(--accent);color:var(--primary);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:var(--shadow-gold);opacity:0;visibility:hidden;transform:translateY(20px);transition:all var(--transition-base);z-index:900;}.scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0);}.scroll-top:hover{background:var(--accent-hover);transform:translateY(-4px);}@media (max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr);}.why-us-grid{grid-template-columns:repeat(2,1fr);}.projects-grid{grid-template-columns:repeat(2,1fr);}.testimonials-grid{grid-template-columns:repeat(2,1fr);}.process-steps{grid-template-columns:repeat(2,1fr);}.process-steps::before{display:none;}.footer-grid{grid-template-columns:1fr 1fr;}}@media (max-width:768px){.menu-toggle{display:flex;}.main-nav{position:fixed;top:0;right:-100%;width:100%;height:100vh;background:rgba(17,17,17,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;justify-content:center;gap:0.5rem;transition:right var(--transition-base);padding:2rem;}.main-nav.open{right:0;}.nav-link{font-size:1.3rem;padding:0.75rem 1.5rem;}.header-cta{margin-top:1rem;font-size:1rem;padding:0.85rem 2rem;}.hero-stats{flex-direction:column;gap:1.5rem;}.about-grid{grid-template-columns:1fr;gap:2rem;}.about-image img{height:350px;}.about-experience-badge{bottom:-1rem;right:1rem;width:110px;height:110px;}.about-experience-number{font-size:2.2rem;}.about-features{grid-template-columns:1fr;}.services-grid{grid-template-columns:1fr;}.why-us-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;}.projects-header{flex-direction:column;align-items:flex-start;}.projects-grid{grid-template-columns:1fr;}.testimonials-grid{grid-template-columns:1fr;}.process-steps{grid-template-columns:1fr;gap:2.5rem;}.contact-grid{grid-template-columns:1fr;gap:2.5rem;}.form-row{grid-template-columns:1fr;}.footer-grid{grid-template-columns:1fr;gap:2rem;}.footer-bottom{flex-direction:column;text-align:center;}.cta-buttons{flex-direction:column;align-items:center;}}@media (max-width:480px){.hero h1{font-size:2rem;}.hero-description{font-size:1rem;}.hero-buttons{flex-direction:column;}.hero-buttons .btn{width:100%;}.why-us-grid{grid-template-columns:1fr;}.why-us-card{padding:2rem 1.5rem;}.trust-bar-inner{flex-direction:column;gap:1.25rem;}}.skip-nav{position:absolute;top:-100%;left:1rem;z-index:9999;padding:.75rem 1.25rem;background:var(--accent);color:var(--primary);font-family:var(--font-heading);font-size:.9rem;font-weight:700;text-decoration:none;border-radius:0 0 10px 10px;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:top .2s;}.skip-nav:focus{top:0;outline:3px solid var(--primary);outline-offset:2px;}.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9998;background:rgba(11,21,33,0.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(249,178,51,0.2);padding:.875rem 1.25rem;transform:translateY(0);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;}.cookie-banner.dismissed{transform:translateY(100%);opacity:0;pointer-events:none;}.cookie-inner{display:flex;align-items:center;gap:1.25rem;max-width:960px;margin:0 auto;flex-wrap:wrap;}.cookie-text{flex:1;font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.5;min-width:200px;}.cookie-text strong{color:rgba(255,255,255,.9);}.cookie-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}.cookie-btn{padding:.55rem 1.25rem;background:var(--accent);color:var(--primary);border:none;border-radius:8px;font-family:var(--font-heading);font-size:.82rem;font-weight:700;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:background .2s,transform .15s;white-space:nowrap;flex-shrink:0;}.cookie-btn:hover{background:var(--accent-hover);transform:translateY(-1px);}.cookie-btn:focus-visible{outline:3px solid var(--white);outline-offset:2px;}.contact{padding:5rem 0;background:var(--primary);}.contact .section-label{color:var(--accent);opacity:1;}.contact .section-title{color:var(--white);}.contact .section-description{color:rgba(255,255,255,.6);}.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:3.5rem;margin-top:3rem;align-items:start;}.contact-info{display:flex;flex-direction:column;gap:1.75rem;}.contact-item{display:flex;align-items:flex-start;gap:1rem;}.contact-item-icon{width:44px;height:44px;background:rgba(249,178,51,.12);border:1px solid rgba(249,178,51,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.25rem;flex-shrink:0;}.contact-item-content h4{font-family:var(--font-heading);font-size:.8rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem;}.contact-item-content p{font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.6;}.contact-item-content a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s;}.contact-item-content a:hover{color:var(--accent);}.contact-form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2rem;}.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}.contact-form .form-group{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;}.contact-form label{font-family:var(--font-heading);font-size:.75rem;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em;}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:.75rem 1rem;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);border-radius:10px;color:var(--white);font-family:var(--font-body);font-size:1rem;transition:border-color .22s,box-shadow .22s,background .22s;-webkit-appearance:none;appearance:none;outline:none;}.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.2);}.contact-form select option{background:var(--primary);color:var(--white);}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:rgba(249,178,51,.6);background:rgba(249,178,51,.05);box-shadow:0 0 0 3px rgba(249,178,51,.12);}.contact-form textarea{resize:vertical;min-height:120px;}.form-consent{margin-top:.25rem !important;margin-bottom:1.25rem !important;}.consent-label{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;font-family:var(--font-body);text-transform:none !important;letter-spacing:0 !important;}.consent-label input[type="checkbox"]{width:20px;height:20px;min-width:20px;min-height:20px;padding:0;margin-top:.1rem;accent-color:var(--accent);cursor:pointer;border-radius:4px;}.consent-label span{font-size:.875rem;color:rgba(255,255,255,.55);line-height:1.55;}.consent-label a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}.consent-label a:hover{color:var(--accent-hover);}.consent-label input[type="checkbox"]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}.form-submit{width:100%;margin-top:.5rem;}@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:2.5rem;}}@media (max-width:600px){.contact-form .form-row{grid-template-columns:1fr;}.contact-form{padding:1.5rem 1.25rem;}.cookie-inner{flex-direction:column;align-items:flex-start;gap:.875rem;}.cookie-btn{width:100%;text-align:center;}}.cookie-banner[hidden]{display:none;}
/* === LANGUAGE TOGGLE BUTTON === */.lang-btn{display:inline-flex;align-items:center;gap:0.35rem;padding:0.45rem 0.9rem;font-family:var(--font-heading);font-size:0.8rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0;line-height:1;}.lang-btn:hover{color:var(--white);background:rgba(249,178,51,0.18);border-color:rgba(249,178,51,0.6);transform:translateY(-1px);}.lang-btn.active-es{color:var(--accent);border-color:rgba(249,178,51,0.7);background:rgba(249,178,51,0.12);}.lang-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}.lang-btn-icon{font-size:0.95rem;line-height:1;}@media (max-width:768px){.lang-btn{font-size:1.1rem;padding:0.75rem 1.5rem;width:fit-content;margin-top:0.75rem;background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.15);}.lang-btn:hover{background:rgba(249,178,51,0.2);border-color:var(--accent);}}.main-nav{flex-wrap:wrap;}/* === LAYOUT PROTECTION (Spanish text overflow prevention) === */.nav-link,.trust-text,.about-feature-text,.why-us-label,.process-step-title,.process-step-text,.footer-heading,.footer-links a,.value-badge,.hero-stat-label{word-break:break-word;overflow-wrap:break-word;}
/* === LANGUAGE ICON (CSS MASK) === */
.lang-icon {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.35rem;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ===================================================================
   KAIROS — Dynamic Contact Button Popover (kc-popover)
   Desktop-only: shows an elegant card with phone number + copy btn
   =================================================================== */

/* ── Base popover ────────────────────────────────────────────────── */
.kc-popover {
  position: absolute;
  z-index: 9999;
  width: 300px;
  background: var(--surface-dark, #111);
  border: 1px solid rgba(249, 178, 51, 0.25);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(249,178,51,0.08);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%) translateY(-16px) scale(0.96);
  transform-origin: bottom center;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.22s;
  pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.kc-popover--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-100%) translateY(-16px) scale(1);
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
  pointer-events: auto;
}

/* ── Arrow pointing down toward the button ───────────────────────── */
.kc-popover-arrow {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 9px;
  overflow: visible;
}

.kc-popover-arrow::before,
.kc-popover-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}

.kc-popover-arrow::before {
  bottom: 0;
  border-top: 10px solid rgba(249, 178, 51, 0.3);
}

.kc-popover-arrow::after {
  bottom: 1px;
  border-top: 9px solid #1a1a1a;
}

/* ── Body ────────────────────────────────────────────────────────── */
.kc-popover-body {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

/* ── Label ───────────────────────────────────────────────────────── */
.kc-popover-label {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  max-width: 100%;
}

/* ── Phone number — BIG and bold ─────────────────────────────────── */
.kc-popover-phone {
  display: block;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent, #F9B233);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
  line-height: 1.1;
}

.kc-popover-phone:hover {
  color: #ffffff;
  transform: scale(1.04);
}

/* ── Hours ───────────────────────────────────────────────────────── */
.kc-popover-hours {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  line-height: 1.5;
  max-width: 100%;
}

/* ── Copy button ─────────────────────────────────────────────────── */
.kc-popover-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: rgba(249, 178, 51, 0.1);
  border: 1px solid rgba(249, 178, 51, 0.25);
  border-radius: 100px;
  color: var(--accent, #F9B233);
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.kc-popover-copy:hover {
  background: rgba(249, 178, 51, 0.2);
  border-color: rgba(249, 178, 51, 0.5);
  transform: translateY(-1px);
}

.kc-copy-icon {
  font-size: 0.95rem;
  vertical-align: middle;
}

/* ── MOBILE: hide popover entirely on mobile ─────────────────────── */
@media (max-width: 1023px) {
  .kc-popover {
    display: none !important;
  }
}

/* ===================================================================
   KAIROS -- Popover de contacto (#kc-pop) -- v2
   Solo visible en desktop (>=1024px). En mobile el CSS lo oculta.
   =================================================================== */
#kc-pop {
  position: absolute;
  z-index: 10000;
  background: #0f1923;
  border: 1px solid rgba(249,178,51,.3);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(249,178,51,.08);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%) translateY(-14px) scale(.95);
  transform-origin: bottom center;
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
  pointer-events: none;
  text-align: center;
}
#kc-pop.kcp-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(-100%) translateY(-14px) scale(1);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}
/* Arrow pointing DOWN toward button */
.kcp-arrow {
  position: absolute;
  bottom: -9px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(249,178,51,.35);
}
.kcp-arrow::after {
  content: '';
  position: absolute;
  left: -8px;
  top: -11px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #0f1923;
}
/* Body */
#kc-pop > *:not(.kcp-arrow) {
  display: block;
}
.kcp-label {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.4);
  margin: 1.4rem 1.6rem .4rem;
}
.kcp-phone {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #F9B233;
  text-decoration: none;
  margin: 0 1.6rem .35rem;
  transition: color .15s;
  white-space: nowrap;
}
.kcp-phone:hover { color: #fff; }
.kcp-hours {
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  margin: 0 1.6rem .9rem;
  line-height: 1.5;
}
.kcp-copy {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 auto 1.2rem;
  padding: .42rem 1.1rem;
  background: rgba(249,178,51,.1);
  border: 1px solid rgba(249,178,51,.25);
  border-radius: 100px;
  color: #F9B233;
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.kcp-copy:hover { background: rgba(249,178,51,.2); transform: translateY(-1px); }
.kcp-copy .material-symbols-rounded { font-size: .9rem; }

/* Mobile: NEVER show the popover */
@media (max-width: 1023px) {
  #kc-pop { display: none !important; }
}

/* ===================================================================
   KAIROS -- FAB (Floating Action Button) de contacto
   + Tarjeta emergente con SMS / WhatsApp
   =================================================================== */

/* ---- FAB button -------------------------------------------------- */
#kc-fab {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 9000;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F9B233 0%, #e8960a 100%);
  color: #0b1521;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(249,178,51,.45), 0 2px 8px rgba(0,0,0,.25);
  opacity: 0;
  transform: scale(0) translateY(20px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1),
              background .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
#kc-fab.kc-fab-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
#kc-fab:hover {
  background: linear-gradient(135deg, #ffcc55 0%, #F9B233 100%);
  box-shadow: 0 10px 32px rgba(249,178,51,.55), 0 4px 12px rgba(0,0,0,.3);
  transform: scale(1.08) translateY(-2px);
}
#kc-fab.kc-fab-open {
  background: linear-gradient(135deg, #0b1521 0%, #243658 100%);
  color: #F9B233;
}
.kc-fab-icon {
  font-size: 1.6rem;
  transition: transform .3s ease;
}
#kc-fab.kc-fab-open .kc-fab-icon {
  transform: rotate(20deg);
}
/* Pulse ring animation */
.kc-fab-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(249,178,51,.35);
  animation: fab-pulse 2.5s ease-out infinite;
}
#kc-fab.kc-fab-open .kc-fab-pulse { display: none; }
@keyframes fab-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ---- FAB popup card ---------------------------------------------- */
#kc-fab-pop {
  position: fixed;
  bottom: 5.5rem;
  right: 1.75rem;
  z-index: 8999;
  width: 300px;
  background: #0f1923;
  border: 1px solid rgba(249,178,51,.2);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(249,178,51,.06);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(.95);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), visibility 0s .25s;
}
#kc-fab-pop.kc-fab-pop-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}

/* Close button */
.kc-fab-pop-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(255,255,255,.08);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.kc-fab-pop-close:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Header */
.kc-fab-pop-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.25rem 1.4rem 1rem;
  background: linear-gradient(135deg, rgba(249,178,51,.08) 0%, rgba(11,21,33,0) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.kc-fab-pop-avatar {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, #F9B233, #e8960a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b1521;
  flex-shrink: 0;
}
.kc-fab-pop-name {
  font-family: 'Montserrat', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .15rem;
}
.kc-fab-pop-status {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  margin: 0;
}
.kc-fab-online-dot {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  flex-shrink: 0;
  animation: online-blink 2.5s ease infinite;
}
@keyframes online-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* Body */
.kc-fab-pop-label {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  margin: 1rem 1.4rem .35rem;
}
.kc-fab-phone {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: #F9B233;
  text-decoration: none;
  margin: 0 1.4rem .1rem;
  letter-spacing: -.02em;
  transition: color .15s;
}
.kc-fab-phone:hover { color: #fff; }

/* Action buttons */
.kc-fab-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  padding: 1rem 1.4rem 1.4rem;
}
.kc-fab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .72rem .5rem;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: all .18s ease;
  white-space: nowrap;
}
.kc-fab-btn .material-symbols-rounded,
.kc-fab-btn svg {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.kc-fab-btn-sms {
  background: rgba(249,178,51,.12);
  border: 1px solid rgba(249,178,51,.25);
  color: #F9B233;
}
.kc-fab-btn-sms:hover {
  background: rgba(249,178,51,.22);
  border-color: rgba(249,178,51,.5);
  transform: translateY(-2px);
}
.kc-fab-btn-wa {
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.25);
  color: #25d366;
}
.kc-fab-btn-wa:hover {
  background: rgba(37,211,102,.22);
  border-color: rgba(37,211,102,.5);
  transform: translateY(-2px);
}

/* ---- scroll-top button: shift up so FAB doesn't overlap ---------- */
.scroll-top {
  bottom: 5.5rem !important;
}

/* ---- Mobile adjustments ----------------------------------------- */
@media (max-width: 1023px) {
  #kc-fab-pop { width: calc(100vw - 2rem); right: 1rem; }
  /* On mobile: FAB actions both navigate (sms / whatsapp), no popover */
}

/* ===================================================================
   KAIROS -- FAB FIXES v2: z-index, popup overflow, cookie awareness
   =================================================================== */

/* FAB must be ABOVE the cookie banner (z-index: 9998) */
#kc-fab {
  z-index: 10001 !important;
}

/* FAB popup above everything */
#kc-fab-pop {
  z-index: 10000 !important;
  /* Constrain width and keep it fully inside viewport */
  right: 1rem !important;
  left: auto !important;
  width: min(300px, calc(100vw - 2rem)) !important;
  /* Ensure bottom of popup is never clipped */
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  /* When cookie banner is visible, shift up above it (~60px banner) */
}

/* Action buttons: fix layout so they never overflow */
.kc-fab-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .5rem !important;
  padding: .85rem 1.1rem 1.1rem !important;
}

.kc-fab-btn {
  font-size: .72rem !important;
  padding: .65rem .4rem !important;
  border-radius: 10px !important;
  overflow: hidden;
  min-width: 0;
}

/* Phone number: never overflow */
.kc-fab-phone {
  font-size: clamp(1.3rem, 4vw, 1.65rem) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* When cookie banner is present and NOT dismissed, push FAB up */
body:has(#cookie-banner:not([hidden]):not(.dismissed)) #kc-fab {
  bottom: calc(1.75rem + 68px) !important;
}
body:has(#cookie-banner:not([hidden]):not(.dismissed)) #kc-fab-pop {
  bottom: calc(5.5rem + 68px) !important;
}

/* ===================================================================
   KAIROS -- Popover & FAB fix v4
   =================================================================== */

/* ---- MAIN POPOVER: arrow + below variant ------------------------- */

/* Default arrow: points DOWN (popover is above the button) */
.kcp-arrow {
  position: absolute;
  bottom: -9px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(249,178,51,.3);
}
.kcp-arrow::after {
  content: '';
  position: absolute;
  left: -8px; top: -11px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #0f1923;
}

/* Below variant: arrow points UP (popover is below the button) */
#kc-pop.kcp-below .kcp-arrow {
  top: -9px !important;
  bottom: auto !important;
  border-top: none !important;
  border-bottom: 9px solid rgba(249,178,51,.3);
}
#kc-pop.kcp-below .kcp-arrow::after {
  top: 2px !important;
  border-top: none !important;
  border-bottom: 8px solid #0f1923;
}

/* Popover transform for below position */
#kc-pop {
  transform: translateY(-100%) translateY(-14px) scale(.95);
  transform-origin: bottom center;
}
#kc-pop.kcp-on {
  transform: translateY(-100%) translateY(-14px) scale(1);
}
/* When popover is BELOW the button: origin top, no offset */
#kc-pop.kcp-below {
  transform: translateY(0) scale(.95) !important;
  transform-origin: top center !important;
}
#kc-pop.kcp-below.kcp-on {
  transform: translateY(0) scale(1) !important;
}

/* ---- FAB PHONE in popup card ------------------------------------ */
.kc-fab-phone {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
  font-weight: 800 !important;
  color: #F9B233 !important;
  text-decoration: none !important;
  margin: 0 1.2rem .1rem !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color .15s !important;
}
.kc-fab-phone:hover { color: #fff !important; }

/* ---- FAB action buttons: equal columns, text never wraps -------- */
.kc-fab-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .55rem !important;
  padding: .8rem 1.1rem 1.1rem !important;
}
.kc-fab-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
  padding: .65rem .5rem !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  transition: all .18s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
.kc-fab-btn .material-symbols-rounded,
.kc-fab-btn svg {
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

/* ===================================================================
   KAIROS -- FIX: Prevent horizontal scroll on ALL devices
   =================================================================== */

/* Lock BOTH html and body - this is the definitive fix */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Ensure no positioned element leaks outside the viewport */
#kc-pop {
  max-width: min(290px, calc(100vw - 16px)) !important;
}

/* FAB and its popup: anchor to right edge, never overflow left */
#kc-fab,
#kc-fab-pop {
  /* Prevent these fixed elements from causing layout width expansion */
  contain: layout;
}

/* Kill horizontal scroll from any floating badges on mobile */
@media (max-width: 768px) {
  .value-badge {
    position: static !important;
    display: inline-block !important;
    animation: none !important;
    margin: 0.25rem !important;
  }

  .quote-values-text {
    position: relative;
    z-index: 2;
  }

  /* Re-layout floating badges as inline inline flow */
  .quote-text-block {
    display: block !important;
    text-align: center;
  }
}

/* Prevent any section from overflowing on mobile */
@media (max-width: 1023px) {
  section,
  .container,
  .hero-content,
  .trust-bar-inner,
  .services-grid,
  .why-us-grid,
  .process-steps,
  .footer-grid {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ===================================================================
   KAIROS — RESPONSIVE FIXES v5  (mobile scrollbar, overflow, popover)
   =================================================================== */

/* 1. GLOBAL: nunca scrollbar horizontal */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* 2. TRUST-BAR: quitar scrollbar visible en mobile — grid en lugar de flex */
.trust-bar {
  overflow: hidden !important;
}
.trust-bar-inner {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .trust-bar-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.1rem 1rem !important;
    justify-items: center !important;
    align-items: center !important;
    padding: 0 1.5rem !important;
  }
  .trust-item:last-child {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 480px) {
  .trust-bar-inner {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    padding: 0 1rem !important;
  }
  .trust-item:last-child {
    grid-column: auto !important;
  }
}

/* 3. HERO: evitar desborde lateral */
.hero,
.hero-background {
  overflow: hidden !important;
  max-width: 100vw !important;
}

/* 4. FAB POPUP: quitar la scrollbar azul visible */
#kc-fab-pop {
  overflow: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#kc-fab-pop::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

/* 5. POPOVER PRINCIPAL: nunca visible en mobile */
@media (max-width: 1023px) {
  #kc-pop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 6. FAB: anclar al borde derecho sin salirse */
#kc-fab {
  right: 1.25rem !important;
  bottom: 1.5rem !important;
}
#kc-fab-pop {
  right: 1rem !important;
  bottom: 5rem !important;
  left: auto !important;
  width: min(300px, calc(100vw - 2rem)) !important;
  max-height: none !important;
}

/* 7. CTA section: botones en columna en móvil */
@media (max-width: 480px) {
  .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 1rem !important;
  }
  .cta-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* 8. HEADER: fondo visible en mobile (menu abierto) */
@media (max-width: 768px) {
  .site-header:not(.scrolled) {
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%) !important;
  }
}

/* 9. Scroll-top: no solapar con FAB */
@media (max-width: 1023px) {
  .scroll-top {
    bottom: 5.25rem !important;
    right: 1.25rem !important;
  }
}

/* 10. Cookie banner: no causar overflow */
.cookie-banner {
  max-width: 100vw !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 11. Secciones: nunca desborden horizontalmente */
section,
.container,
header,
footer {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* 12. FAB cuando cookie banner está presente */
body:has(#cookie-banner:not([hidden]):not(.dismissed)) #kc-fab {
  bottom: calc(1.5rem + 65px) !important;
}
body:has(#cookie-banner:not([hidden]):not(.dismissed)) #kc-fab-pop {
  bottom: calc(5rem + 65px) !important;
}

/* ===================================================================
   KAIROS — VIDEO PORTFOLIO SECTION
   Mobile: TikTok-style fullscreen modal with scroll-snap
   Desktop: Inline horizontal carousel with hover controls
   =================================================================== */

/* ── Video FAB (bottom-left, premium glassmorphism) ──────────────── */
#video-fab {
  position: fixed;
  bottom: 1.75rem;
  left: 1.75rem;
  z-index: 9000;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 25, 35, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(249, 178, 51, 0.3);
  color: #F9B233;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(249, 178, 51, 0.08);
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0) translateY(20px);
  pointer-events: none;
}
#video-fab.vfab-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
#video-fab:hover {
  background: rgba(249, 178, 51, 0.15);
  border-color: rgba(249, 178, 51, 0.6);
  box-shadow: 0 10px 36px rgba(249, 178, 51, 0.25), 0 0 0 1px rgba(249, 178, 51, 0.15);
  transform: scale(1.1) translateY(-2px);
}
#video-fab .material-symbols-rounded {
  font-size: 1.5rem;
}
/* Pulse ring */
.vfab-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(249, 178, 51, 0.25);
  animation: vfab-pulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes vfab-pulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}
/* Cookie banner shift */
body:has(#cookie-banner:not([hidden]):not(.dismissed)) #video-fab {
  bottom: calc(1.75rem + 65px) !important;
}
@media (max-width: 1023px) {
  #video-fab {
    bottom: 1.25rem !important;
    left: 1.25rem !important;
    width: 48px;
    height: 48px;
  }
  body:has(#cookie-banner:not([hidden]):not(.dismissed)) #video-fab {
    bottom: calc(1.25rem + 65px) !important;
  }
}

/* ── Video Portfolio Section ─────────────────────────────────────── */
.video-portfolio {
  padding: 5rem 0;
  background: var(--bg-color, #0b1521);
  position: relative;
}
/* Contrast fix: dark background needs white text (scoped, does not affect other sections) */
.video-portfolio .section-title {
  color: #ffffff;
}
.video-portfolio .section-description {
  color: rgba(255, 255, 255, 0.7);
}

/* ── Video Thumbnail Grid ────────────────────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* ── Video Thumbnail Card ────────────────────────────────────────── */
.video-thumb-card {
  position: relative;
  aspect-ratio: 9 / 12;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.video-thumb-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(249, 178, 51, 0.2);
  border-color: rgba(249, 178, 51, 0.3);
}
.video-thumb-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Overlay gradient + play icon */
.video-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  transition: background 0.3s ease;
}
.video-thumb-card:hover .video-thumb-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
}
.video-thumb-title {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 48px;
  height: 48px;
  background: rgba(249, 178, 51, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b1521;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 16px rgba(249, 178, 51, 0.4);
}
.video-thumb-play .material-symbols-rounded {
  font-size: 1.5rem;
  margin-left: 2px; /* optical centering for play icon */
}
.video-thumb-card:hover .video-thumb-play {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 8px 28px rgba(249, 178, 51, 0.55);
}

/* ── Show More Button ────────────────────────────────────────────── */
.video-grid-more {
  text-align: center;
  margin-top: 2rem;
}

/* ── Skeleton ────────────────────────────────────────────────────── */
.video-skeleton {
  aspect-ratio: 9 / 12;
  border-radius: 14px;
  background: linear-gradient(90deg, #1a2535 25%, #243040 50%, #1a2535 75%);
  background-size: 600px 100%;
  animation: kairos-shimmer 1.4s infinite linear;
}
@keyframes kairos-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ===================================================================
   VIDEO MODAL — Mobile TikTok-style (< 768px)
   =================================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: #000;
  overscroll-behavior: contain;
}
.video-modal-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20001;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

/* Scroll-snap track */
.video-modal-track {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.video-modal-track::-webkit-scrollbar {
  display: none;
}

/* Each slide */
.video-modal-slide {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}
/* Vertical videos: fill the screen */
.video-modal-slide video.video-vertical {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Horizontal videos: contain with black bars */
.video-modal-slide video.video-horizontal {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Project title overlay in modal */
.video-modal-info {
  position: absolute;
  bottom: 4rem;
  left: 1rem;
  right: 4rem;
  z-index: 2;
  pointer-events: none;
}
.video-modal-title {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  margin: 0;
}
.video-modal-category {
  font-size: 0.72rem;
  font-weight: 600;
  color: #F9B233;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  margin-top: 0.25rem;
}

/* ===================================================================
   DESKTOP: Hide modal, show inline carousel (≥ 768px)
   =================================================================== */
@media (min-width: 768px) {
  /* Modal is never used on desktop */
  .video-modal {
    display: none !important;
  }

  /* Desktop inline play: hide play button + title overlay while playing */
  .video-thumb-card.is-playing .video-thumb-play {
    display: none;
  }
  .video-thumb-card.is-playing .video-thumb-overlay {
    opacity: 0;
    pointer-events: none;
  }
  /* Allow the video element itself to receive clicks for native controls */
  .video-thumb-card.is-playing video {
    pointer-events: auto;
  }
}

/* ===================================================================
   HEADER SOCIAL BUTTONS — mobile only (Facebook / Instagram / TikTok)
   =================================================================== */
.header-social,
.nav-social { display: none; }

.social-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  color: var(--accent);
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 200ms ease;
}
/* Minimum 44x44 touch target without growing the visible circle */
.social-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.social-btn svg { display: block; }
.social-btn:hover,
.social-btn:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary);
}
.social-btn:active { transform: scale(0.95); }
.social-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  /* Row in the header bar: pushed right, just before the hamburger */
  .header-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
    animation: social-fade-in 300ms ease both;
  }
  .header-inner { justify-content: flex-start; gap: 0; }
  .logo, .menu-toggle { flex: 0 0 auto; }

  /* Keep the open menu in one column; scroll if it is taller than the screen */
  .main-nav { flex-wrap: nowrap; overflow-y: auto; justify-content: safe center; }

  /* Same row at the bottom of the open mobile menu */
  .nav-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }
  .nav-social-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
  }
  .nav-social-row { display: flex; gap: 8px; }
}

/* Narrow phones: smaller circles, touch target stays 44px */
@media (max-width: 359px) {
  .header-social { gap: 6px; margin-right: 8px; }
  .header-social .social-btn { width: 36px; height: 36px; }
}

@keyframes social-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .header-social { animation: none; }
  .social-btn { transition: none; }
  .social-btn:active { transform: none; }
}

/* ===================================================================
   MOBILE HEADER HEIGHT + HERO SPACING
   Fixed header height so the hero badge can never sit under the header
   =================================================================== */
:root { --header-h: 72px; }

@media (max-width: 768px) {
  /* Known, constant header height (also while scrolled) */
  .site-header,
  .site-header.scrolled { padding: 0; }
  .site-header .container { padding-left: 16px; padding-right: 16px; }
  .header-inner { min-height: var(--header-h); }

  /* Hero starts below the header instead of being centred behind it */
  .hero { align-items: flex-start; }
  .hero-content { padding-top: calc(var(--header-h) + 24px); }

  /* Vertical rhythm: badge 20 / title 16 / text 28 / buttons 12 / 32 / stats */
  .hero-badge { margin-bottom: 20px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-description { margin-bottom: 28px; }
  .hero-buttons { gap: 12px; margin-bottom: 32px; }
}

/* ===================================================================
   DESKTOP NAV — "Contact" dropdown with social links
   =================================================================== */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-head { display: inline-flex; align-items: center; }
.nav-chevron {
  /* Absolute so the chevron adds no width to the nav row */
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown.open .nav-chevron,
.nav-dropdown-head:hover .nav-chevron { color: var(--white); }
.nav-dropdown.open .nav-chevron { transform: translateY(-50%) rotate(180deg); }

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1200;
  min-width: 220px;
  padding: 8px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top left;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s 160ms;
}
.nav-dropdown-panel.align-right { left: auto; right: 0; transform-origin: top right; }
/* Caret pointing at the Contact link */
.nav-dropdown-panel::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  transform: rotate(45deg);
  border-radius: 2px;
}
.nav-dropdown-panel.align-right::before { left: auto; right: 22px; }
/* Keeps the hover bridge between the link and the panel */
.nav-dropdown-panel::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-dropdown.open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.nav-dd-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(var(--primary-rgb));
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, background-color var(--transition-fast);
}
.nav-dd-item svg { flex: 0 0 auto; transition: transform var(--transition-fast); }
.nav-dd-item:hover,
.nav-dd-item:focus-visible {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgb(var(--primary-rgb));
}
.nav-dd-item:hover svg,
.nav-dd-item:focus-visible svg { transform: translateX(2px); }
.nav-dd-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-dd-sep {
  height: 1px;
  margin: 6px 10px;
  background: rgba(var(--primary-rgb), 0.15);
}
/* Staggered entrance */
.nav-dropdown.open .nav-dd-item {
  opacity: 1;
  transform: none;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-fast);
}
.nav-dropdown.open .nav-dd-item:nth-of-type(1) { transition-delay: 40ms; }
.nav-dropdown.open .nav-dd-item:nth-of-type(2) { transition-delay: 80ms; }
.nav-dropdown.open .nav-dd-item:nth-of-type(3) { transition-delay: 120ms; }
.nav-dropdown.open .nav-dd-item:nth-of-type(4) { transition-delay: 160ms; }

/* Mobile: plain "Contact" link, no dropdown */
@media (max-width: 768px) {
  .nav-dropdown, .nav-dropdown-head { display: contents; }
  .nav-chevron, .nav-dropdown-panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-panel,
  .nav-dropdown.open .nav-dropdown-panel,
  .nav-dd-item,
  .nav-dropdown.open .nav-dd-item {
    transform: none;
    transition: opacity 160ms ease, visibility 0s;
    transition-delay: 0s;
  }
  .nav-chevron { transition: none; }
}