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

/* ============================================
   BISUBA MARKETING — Global Stylesheet
   ============================================ */
:root {
  --brand-blue: #0A192F;
  --brand-deep: #050C16;
  --brand-accent: #112240;
  --brand-red: #FF0000;
  --midnight: var(--brand-blue);
  --charcoal: #D7E2F0;
  --gold: var(--brand-red);
  --gold-light: #FF4D4D;
  --champagne: #0A192F;
  --off-white: var(--brand-deep);
  --slate: #A8B2C2;
  --white: #FFFFFF;
  --black: #03070D;
  --glass: rgba(255,255,255,0.05);
  --glass-dark: rgba(0,0,0,0.2);
  --line-soft: rgba(255,255,255,0.1);
  --line-softer: rgba(255,255,255,0.05);
  --gold-20: rgba(255,0,0,0.2);
  --midnight-70: rgba(5,12,22,0.72);
  --midnight-80: rgba(5,12,22,0.85);
  --shadow-sm: 0 2px 20px rgba(0,0,0,0.18);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.22);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.28);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.35);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-accent: 'Outfit', sans-serif;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--white);background:var(--brand-deep);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:color var(--transition)}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--white)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--brand-deep)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}

/* Typography */
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--white);line-height:1.25;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.75rem,4vw,2.5rem)}
h3{font-size:clamp(1.25rem,3vw,1.75rem);font-weight:600}
h4{font-size:1.125rem;font-weight:600}
p{margin-bottom:1rem}
.kicker{font-family:var(--font-body);font-size:.8125rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:800px;margin:0 auto;padding:0 24px}
.section{padding:96px 0;position:relative}
.section--dark{background:var(--brand-deep)}
.section--white{background:var(--brand-blue)}
.section--cream{background:var(--brand-accent)}
.section--offwhite{background:var(--brand-deep)}
.text-center{text-align:center}
.text-white{color:var(--white)}
.text-white-70{color:rgba(255,255,255,0.72)}
.text-gold{color:var(--gold)}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.mb-6{margin-bottom:3rem}.mb-8{margin-bottom:4rem}
.mt-2{margin-top:1rem}.mt-4{margin-top:2rem}
.max-w-600{max-width:600px;margin-left:auto;margin-right:auto}
.max-w-700{max-width:700px;margin-left:auto;margin-right:auto}
.max-w-800{max-width:800px;margin-left:auto;margin-right:auto}

/* Grid */
.grid{display:grid;gap:40px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5050{grid-template-columns:1fr 1fr}
.grid-4060{grid-template-columns:2fr 3fr}
.grid-align-center{align-items:center}
.grid-gap-60{gap:60px}

/* Divider */
.gold-divider{width:60px;height:2px;background:var(--gold);border:none}
.gold-divider--center{margin:0 auto}

/* Buttons */
.btn{display:inline-block;font-family:var(--font-body);font-size:.875rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:16px 34px;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all var(--transition);text-align:center}
.btn--primary{background:var(--gold);color:var(--white);border-color:var(--gold)}
.btn--primary:hover{background:var(--white);color:var(--brand-deep);border-color:var(--white);transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,0,0,0.28)}
.btn--secondary{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn--secondary:hover{background:var(--gold);color:var(--white);transform:translateY(-2px)}
.btn--white{background:rgba(255,255,255,0.05);color:var(--white);border-color:rgba(255,255,255,0.18);backdrop-filter:blur(12px)}
.btn--white:hover{background:var(--white);color:var(--brand-deep)}
.btn-group{display:flex;gap:20px;flex-wrap:wrap}
.btn-group--center{justify-content:center}
.link-arrow{font-size:.8125rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px;transition:gap var(--transition)}
.link-arrow:hover{gap:14px}

/* Top Bar */
.top-bar{background:var(--brand-deep);padding:10px 0;text-align:center;font-size:.75rem;color:rgba(255,255,255,0.65);letter-spacing:1px;border-bottom:1px solid var(--line-softer)}

/* Header */
.header{background:rgba(5,12,22,0.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:1000;transition:box-shadow var(--transition),background var(--transition)}
.header.scrolled{background:rgba(5,12,22,0.92);box-shadow:0 2px 30px rgba(0,0,0,0.25)}
.header .container{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.logo{display:inline-flex;align-items:center;color:var(--white)}
.logo img{width:142px;height:auto;display:block}
.footer .logo img{width:126px}
.nav{display:flex;align-items:center;gap:36px}
.nav a{font-size:.8125rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.76);position:relative;padding:4px 0}
.nav a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--gold);transition:width var(--transition)}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav a:hover,.nav a.active{color:var(--gold)}
.nav-cta{font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--gold);color:var(--white);padding:12px 24px;border-radius:8px;transition:all var(--transition)}
.nav-cta:hover{background:var(--white);color:var(--brand-deep)}
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1001;background:none;border:none;padding:4px}
.hamburger span{display:block;width:28px;height:2px;background:var(--white);transition:all var(--transition)}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
.mobile-nav{display:none;position:fixed;inset:0;background:rgba(5,12,22,0.96);backdrop-filter:blur(20px);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;visibility:hidden;transition:opacity var(--transition),visibility var(--transition)}
.mobile-nav.active{opacity:1;visibility:visible}
.mobile-nav a{font-family:var(--font-heading);font-size:2rem;color:var(--white);transition:color var(--transition)}
.mobile-nav a:hover{color:var(--gold)}

/* Hero */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background-size:cover;background-position:center}
.hero--short{min-height:60vh}
.hero__overlay{position:absolute;inset:0;background:var(--midnight-70);z-index:1}
.hero__content{position:relative;z-index:2;padding:60px 24px}
.hero h1{color:var(--white);margin-bottom:1.25rem}
.hero p{color:rgba(255,255,255,0.75);font-size:1.125rem;line-height:1.75}
.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:2;color:var(--gold);animation:float 2.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}

/* Cards */
.card{padding:40px;border-radius:8px;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),background var(--transition)}
.card:hover{transform:translateY(-5px)}
.card--dark{border:1px solid var(--line-soft);background:var(--glass);backdrop-filter:blur(12px)}
.card--dark:hover{border-color:var(--gold)}
.card--white{background:var(--glass);border:1px solid var(--line-soft);backdrop-filter:blur(12px);box-shadow:var(--shadow-md)}
.card--white:hover{box-shadow:var(--shadow-xl)}
.card__icon{width:48px;height:48px;color:var(--gold);margin-bottom:1.5rem}
.card__icon svg{width:100%;height:100%}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;text-align:center}
.stat__number{font-family:var(--font-heading);font-size:clamp(2.5rem,4vw,3rem);font-weight:700;color:var(--gold);line-height:1.2}
.stat__label{font-size:.8125rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-top:.5rem}

/* City Blocks */
.city-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:80px}
.city-block:last-child{margin-bottom:0}
.city-block--reverse .city-block__image{order:2}
.city-block--reverse .city-block__content{order:1}
.city-block__image img{width:100%;height:400px;object-fit:cover;opacity:.85;border-radius:8px;transition:opacity var(--transition-slow)}
.city-block__image:hover img{opacity:1}
.city-block__label{font-size:.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.city-block__capabilities{margin-top:1.5rem;display:flex;flex-direction:column;gap:8px}
.city-block__capabilities span{font-size:.875rem;font-weight:500;color:var(--gold)}
.city-block__capabilities span::before{content:'\2014\00a0';opacity:.5}

/* Timeline */
.timeline{position:relative;max-width:900px;margin:0 auto;padding:20px 0}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--gold);transform:translateX(-50%)}
.timeline__item{display:flex;width:100%;margin-bottom:60px;position:relative}
.timeline__item:last-child{margin-bottom:0}
.timeline__item--left .timeline__content{text-align:right;padding-right:60px;margin-right:50%}
.timeline__item--right .timeline__content{padding-left:60px;margin-left:50%}
.timeline__dot{position:absolute;left:50%;top:8px;width:18px;height:18px;background:var(--gold);border:4px solid var(--brand-blue);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 4px var(--gold-20);z-index:1}
.timeline__year{font-family:var(--font-heading);font-size:1.125rem;font-weight:700;color:var(--gold);margin-bottom:4px}
.timeline__title{font-family:var(--font-heading);font-size:1.125rem;font-weight:600;color:var(--white);margin-bottom:8px}
.timeline__desc{font-size:.9375rem;color:var(--slate)}

/* Team */
.team-member{text-align:center}
.team-member__image{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(100%);transition:filter var(--transition-slow)}
.team-member:hover .team-member__image{filter:grayscale(0%)}
.team-member__name{font-family:var(--font-heading);font-size:1.125rem;font-weight:600;color:var(--white);margin-top:1rem;margin-bottom:.25rem}
.team-member__role{font-size:.8125rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.team-member__location{font-size:.75rem;color:var(--slate);margin-top:.25rem}

/* Testimonials */
.testimonial-carousel{position:relative;overflow:hidden}
.testimonial-track{display:flex;transition:transform .6s ease}
.testimonial-slide{min-width:100%;text-align:center;padding:0 20px}
.testimonial__quote-icon{font-family:var(--font-heading);font-size:4rem;color:var(--gold);opacity:.3;line-height:1;margin-bottom:1rem}
.testimonial__text{font-family:var(--font-heading);font-size:clamp(1.125rem,2.5vw,1.375rem);font-style:italic;color:var(--white);line-height:1.7;margin-bottom:1.5rem}
.testimonial__name{font-size:.875rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--white)}
.testimonial__info{font-size:.875rem;color:var(--slate);margin-top:4px}
.testimonial-dots{display:flex;justify-content:center;gap:12px;margin-top:2rem}
.testimonial-dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--gold);background:transparent;cursor:pointer;transition:background var(--transition);padding:0}
.testimonial-dots button.active{background:var(--gold)}

/* Logo Bar */
.logo-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:50px}
.logo-bar img{height:40px;width:auto;filter:grayscale(100%);opacity:.35;transition:all var(--transition)}
.logo-bar img:hover{filter:grayscale(0%);opacity:1}

/* Contact Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-group{display:flex;flex-direction:column}
.form-group--full{grid-column:1/-1}
.form-group label{font-size:.8125rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--white);margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{font-family:var(--font-body);font-size:1rem;padding:14px 18px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,0.05);color:var(--white);transition:border-color var(--transition),background var(--transition);outline:none;width:100%;backdrop-filter:blur(12px)}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,0.38)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold)}
.form-group select option{color:var(--brand-deep);background:var(--white)}
.form-group textarea{min-height:150px;resize:vertical}

/* Office Cards */
.office-card{padding:40px;background:var(--glass);border:1px solid var(--line-soft);border-radius:8px;backdrop-filter:blur(12px);box-shadow:var(--shadow-md);transition:transform var(--transition),box-shadow var(--transition)}
.office-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.office-card__city{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.office-card__tagline{font-size:.8125rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
.office-card p{font-size:.9375rem;color:var(--slate);margin-bottom:.5rem}
.office-card a{color:var(--gold)}
.office-card a:hover{color:var(--white)}

/* Service Detail */
.service-detail{padding:80px 0;border-bottom:1px solid rgba(200,169,110,0.15)}
.service-detail:last-child{border-bottom:none}
.service-detail__number{font-family:var(--font-heading);font-size:4rem;font-weight:700;color:var(--gold-20);line-height:1;margin-bottom:1rem}
.service-detail__includes{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.5rem}
.service-detail__tag{font-size:.8125rem;font-weight:500;padding:8px 18px;border:1px solid var(--line-soft);border-radius:999px;color:var(--charcoal);transition:all var(--transition)}
.service-detail__tag:hover{background:var(--gold);color:var(--white);border-color:var(--gold)}
.service-detail__ideal{margin-top:1.5rem;padding:20px 24px;background:var(--glass);border:1px solid var(--line-soft);border-radius:8px;font-size:.9375rem;color:var(--charcoal)}
.service-detail__ideal strong{color:var(--gold)}

/* Process */
.process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.process-step{text-align:center}
.process-step__number{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;color:var(--gold);opacity:.3;margin-bottom:1rem}
.process-step h4{margin-bottom:.5rem;color:var(--white)}
.process-step p{font-size:.875rem;color:rgba(255,255,255,0.6)}

/* Footer */
.footer{background:var(--black);padding:80px 0 0;border-top:1px solid var(--line-softer)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.footer__heading{font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
.footer p,.footer a{font-size:.875rem;color:rgba(255,255,255,0.5)}
.footer a:hover{color:var(--gold)}
.footer__links{display:flex;flex-direction:column;gap:12px}
.footer__social{display:flex;gap:16px;margin-top:1.5rem}
.footer__social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.15);border-radius:50%;color:rgba(255,255,255,0.5);transition:all var(--transition)}
.footer__social svg{width:16px;height:16px;display:block;fill:currentColor}
.footer__social a:hover{border-color:var(--gold);color:var(--gold)}
.footer__newsletter-input{display:flex;margin-top:1rem}
.footer__newsletter-input input{flex:1;font-family:var(--font-body);font-size:.875rem;padding:12px 16px;border:1px solid rgba(255,255,255,0.15);border-radius:8px 0 0 8px;background:transparent;color:var(--white);outline:none}
.footer__newsletter-input input::placeholder{color:rgba(255,255,255,0.3)}
.footer__newsletter-input input:focus{border-color:var(--gold)}
.footer__newsletter-input button{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:12px 24px;background:var(--gold);color:var(--white);border:none;border-radius:0 8px 8px 0;cursor:pointer;transition:background var(--transition)}
.footer__newsletter-input button:hover{background:var(--gold-light)}
.footer__bottom{margin-top:60px;padding:24px 0;border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:rgba(255,255,255,0.3)}
.footer__bottom a{color:rgba(255,255,255,0.3)}
.footer__bottom a:hover{color:var(--gold)}

/* Reveal Animations */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* Gold image shadow */
.gold-shadow{box-shadow:20px 20px 0px var(--brand-accent)}

.glass{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line-soft)}
.glass-dark{background:var(--glass-dark);backdrop-filter:blur(20px);border:1px solid var(--line-softer)}
.section-padding{padding-top:96px;padding-bottom:96px}

@keyframes fade-in-left{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes fade-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scale-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.fade-in-left{animation:fade-in-left .8s ease-out forwards;opacity:0}
.fade-in-up{animation:fade-in-up .8s ease-out forwards;opacity:0}
.scale-in{animation:scale-in 1s ease-out forwards;opacity:0}

/* Responsive */
@media(max-width:1024px){
  .section{padding:80px 0}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .section{padding:60px 0}
  .hamburger{display:flex}
  .mobile-nav{display:flex}
  .nav,.nav-cta{display:none}
  .grid-2,.grid-3,.grid-4,.grid-5050,.grid-4060{grid-template-columns:1fr}
  .grid-gap-60{gap:40px}
  .city-block{grid-template-columns:1fr;gap:30px}
  .city-block--reverse .city-block__image,.city-block--reverse .city-block__content{order:0}
  .city-block__image img{height:280px}
  .timeline::before{left:20px}
  .timeline__item--left .timeline__content,.timeline__item--right .timeline__content{margin-left:50px;margin-right:0;padding-left:0;padding-right:0;text-align:left}
  .timeline__dot{left:20px}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;gap:12px;text-align:center}
  .btn-group{flex-direction:column;align-items:stretch}
  .btn-group--center{align-items:center}
  .logo-bar{gap:30px}
  .logo-bar img{height:30px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:80vh}
  .hero--short{min-height:50vh}
  .gold-shadow{box-shadow:10px 10px 0px var(--gold)}
  .logo img{width:118px}
  .footer .logo img{width:112px}
}
@media(max-width:480px){
  .process-steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}