/* ============================================================
   PASSION SOLUTIONS LIMITED — Design System
   "Bringing Your Ideas to Light"
   ============================================================ */

:root{
  --orange: #f46231;
  --orange-deep: #d14b1e;
  --orange-light: #ff8a5c;
  --black: #0d0d0d;
  --charcoal: #1a1714;
  --cream: #E6E6E6;;
  --sand: #f4ede7;
  --gray: #6f6862;
  --gray-light: #a89e96;
  --white: #ffffff;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}

html{scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body{
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  max-width: 100%;
      position: relative;
    
}

h1,h2,h3,h4,h5,.display-font{
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  color: var(--black);
}

a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1360px; margin:0 auto; padding:0 24px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
  margin-bottom:18px;
}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--orange); display:inline-block;}

.btn-passion{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; border-radius:100px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  background:var(--orange); color:#fff; border:2px solid var(--orange);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  position:relative; overflow:hidden; cursor:pointer;
}
.btn-passion:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(244,98,49,.35); color:#fff;}
.btn-passion:active{transform:translateY(-1px) scale(.98);}
.btn-passion.ripple::after{
  content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
  width:10px; height:10px; transform:scale(0); pointer-events:none; opacity:0;
}
.btn-passion.is-rippling::after{animation:ripple .6s ease-out;}
@keyframes ripple{ to{ transform:scale(40); opacity:0; } }

.btn-outline-passion{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px; border-radius:100px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55);
  transition:all .35s var(--ease);
}
.btn-outline-passion:hover{background:#fff; color:var(--black); border-color:#fff;}

.btn-dark-passion{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px; border-radius:100px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  background:var(--black); color:#fff; border:2px solid var(--black);
  transition:all .35s var(--ease);
}
.btn-dark-passion:hover{background:var(--orange); border-color:var(--orange); transform:translateY(-3px);}

/* ============ LOADER ============ */
#loader{
  position:fixed; inset:0; z-index:99999; background:var(--black);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#loader.hide{opacity:0; visibility:hidden;}
.loader-mark{display:flex; gap:8px;}
.loader-mark span{
  width:16px; height:40px; border-radius:20px; background:var(--orange);
  animation: loaderPulse 1.1s ease-in-out infinite;
}
.loader-mark span:nth-child(2){animation-delay:.12s; background:var(--orange-light);}
.loader-mark span:nth-child(3){animation-delay:.24s; background:#fff;}
.loader-mark span:nth-child(4){animation-delay:.36s; background:var(--orange-light);}
@keyframes loaderPulse{
  0%,100%{transform:scaleY(.4); opacity:.5;}
  50%{transform:scaleY(1); opacity:1;}
}
.loader-text{color:#fff; font-family:var(--font-display); letter-spacing:.3em; font-size:.75rem; margin-top:22px; text-transform:uppercase; opacity:.7;}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:99998;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{width:8px; height:8px; background:var(--orange);}
.cursor-ring{width:38px; height:38px; border:1.5px solid rgba(244,98,49,.5); transition:width .2s,height .2s, border-color .2s;}
.cursor-ring.grow{width:64px; height:64px; border-color:var(--orange);}
@media (hover:none), (max-width:992px){
  .cursor-dot,.cursor-ring{display:none;}
}

/* ============ NAVBAR ============ */
.navbar-passion{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0; transition: all .45s var(--ease);
  background:transparent;
}
.navbar-passion.scrolled{
  padding:12px 0; background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  background-color: #fff;
}

.nav-inner{display:flex; align-items:center; justify-content:space-between;}
.brand-logo{display:flex; align-items:center; position:relative; height:44px; width:120px;}
.logo-img{
  position:absolute; top:50%; left:0; height:54px; width:auto; max-width:150px;
  transform:translateY(-50%); object-fit:contain; transition:opacity .4s var(--ease);
}
.logo-white{opacity:1;}
.logo-orange{opacity:0;}
.navbar-passion.scrolled .logo-white{opacity:0;}
.navbar-passion.scrolled .logo-orange{opacity:1;}

/* Sidebar (mobile nav) header: orange logo + close button */
.nav-sidebar-header{
  display:none; width:100%; align-items:center; justify-content:space-between;
  padding-bottom:18px !important; border-bottom:1px solid var(--sand); margin-bottom:10px;
}
.nav-sidebar-header .sidebar-logo{height:36px; width:auto;}
.nav-close{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--sand); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--black); font-size:1rem;
  transition:all .25s;
}
.nav-close:hover{background:var(--orange); border-color:var(--orange); color:#fff;}

.footer-logo{height:auto; width:150px;}
.footer-logo .logo-img{position:static; transform:none; height:auto; width:100%; max-width:150px; opacity:1;}

.nav-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;}
.nav-links a{
  padding:10px 16px; font-size:.92rem; font-weight:500; color:rgba(255,255,255,.9);
  transition:color .3s; position:relative;
   white-space: nowrap;
}
.navbar-passion.scrolled .nav-links a{color:var(--charcoal);}
.navbar-passion.scrolled  .nav-links .active{color:var(--orange);}
.nav-links a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}
.nav-links a:hover{color:var(--orange);}
.nav-links .active{color:var(--orange);}

.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,.15); align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem;
}
.navbar-passion.scrolled .nav-toggle{background:var(--sand); color:var(--black);}

@media(max-width:991px){
  .nav-links{
    position:fixed; top:0; right:-100%; width:min(360px,86vw); height:100vh;
    background:#fff; flex-direction:column; align-items:flex-start; padding:32px 28px 32px;
    transition:right .5s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.15);
    overflow-y:auto;
  }
  .nav-links.open{right:0;}
  .nav-links a{color:var(--charcoal); width:100%; padding:14px 4px; font-size:1.05rem; border-bottom:1px solid var(--sand);}
  .nav-sidebar-header{display:flex;}
  .nav-toggle{display:flex;}
  .nav-cta .btn-passion{display:none;}
  .nav-links .active{color:var(--orange);}
}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background: radial-gradient(ellipse at 20% 20%, #2a1710 0%, var(--black) 55%);
  overflow:hidden; padding-top:120px;
}
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  background:radial-gradient(circle, var(--orange) 0%, transparent 70%);
  animation: blobFloat 12s ease-in-out infinite;
}

.hero-blob.b1{width:520px; height:520px; top:-140px; right:-100px;}
.hero-blob.b2{width:380px; height:380px; bottom:-120px; left:-80px; animation-delay:2s; opacity:.35;}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-30px,30px) scale(1.08);}
}
.hero-grid-lines{
  position:absolute; inset:0; opacity:.08;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.hero-content{position:relative; z-index:3;}
.hero-tag{
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px;
  border:1px solid rgba(255,255,255,.18); border-radius:100px; background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px); color:#fff; font-size:.82rem; font-weight:500; margin-bottom:28px;
}
.hero-tag .dot{width:8px; height:8px; border-radius:50%; background:var(--orange); animation:dotPulse 1.6s infinite;}
@keyframes dotPulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

.hero h1{
  color:#fff; font-size:clamp(2.6rem, 6vw, 5.4rem); line-height:1.02; margin-bottom:26px;
}
.hero h1 .line{display:block; overflow:hidden;}
.hero h1 .accent{color:var(--orange); font-style:italic; font-weight:600;}
.hero-sub{
  color:rgba(255,255,255,.72); font-size:1.15rem; max-width:520px; margin-bottom:40px; line-height:1.65;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:64px;}
.play-btn{
  display:inline-flex; align-items:center; gap:14px; color:#fff; font-weight:600; font-size:.95rem;
}
.play-btn .circle{
  width:56px; height:56px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);
  background:rgba(255,255,255,.06);
}
.play-btn:hover .circle{background:var(--orange); border-color:var(--orange); transform:scale(1.08);}

.hero-stats{display:flex; gap:52px; flex-wrap:wrap;padding: 20px;}
.hero-stat .num{font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:#fff; line-height:1;}
.hero-stat .num span{color:var(--orange);}
.hero-stat .lbl{color:rgba(255,255,255,.55); font-size:.82rem; margin-top:6px; letter-spacing:.02em;}

.hero-visual{position:relative; z-index:2; height:100%;}
.hero-glass-card{
  position:absolute; padding:22px 26px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14); color:#fff; box-shadow:0 30px 60px rgba(0,0,0,.35);
  animation:cardFloat 6s ease-in-out infinite;
}
.hero-glass-card.gc1{top:6%; right:8%; animation-delay:.2s;}
.hero-glass-card.gc2{bottom:14%; left:0; animation-delay:1.4s;}
.hero-glass-card.gc3{top:42%; right:-4%; animation-delay:.8s;}
@keyframes cardFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);}}
.hero-glass-card .icon{width:38px; height:38px; border-radius:10px; background:var(--orange); display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.hero-glass-card .t{font-weight:600; font-size:.92rem;}
.hero-glass-card .s{font-size:.75rem; color:rgba(255,255,255,.6);}

.hero-orb-wrap{
  position:relative; width:100%; height:520px; border-radius:40% 60% 55% 45% / 50% 45% 55% 50%;
  background:linear-gradient(145deg, var(--orange) 0%, var(--orange-deep) 100%);
  overflow:hidden; box-shadow: 0 40px 90px rgba(230, 230, 230, .35);
  animation:morph 10s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{border-radius:40% 60% 55% 45% / 50% 45% 55% 50%;}
  50%{border-radius:55% 45% 40% 60% / 45% 55% 45% 55%;}
}
.hero-orb-wrap img{width:100%; height:100%; object-fit:cover; mix-blend-mode:luminosity; opacity:.85;}

.scroll-indicator{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,.55);
}
.scroll-indicator .wheel{width:26px; height:42px; border:1.5px solid rgba(255,255,255,.4); border-radius:14px; position:relative;}
.scroll-indicator .wheel::before{
  content:""; position:absolute; top:8px; left:50%; width:4px; height:8px; background:var(--orange);
  border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.6s infinite;
}
@keyframes scrollDot{0%{opacity:1; top:8px;} 100%{opacity:0; top:22px;}}
.scroll-indicator span{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;}

/* ============ CURVE DIVIDERS (brand signature) ============ */
.curve-divider{display:block; width:100%; line-height:0; position:relative; z-index:2;}
.curve-divider svg{width:100%; height:auto; display:block;}
.curve-divider.flip{transform:scaleY(-1);}

/* ============ SECTION WRAPPERS ============ */
section{position:relative;}
.section-pad{padding:130px 0;}
.bg-cream{background:var(--cream);}
.bg-black{background:var(--black); color:#fff;}
.bg-orange{background:linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%); color:#fff;}
.bg-sand{background:var(--sand);}
.bg-white{background:#fff;}

.section-tag-right{
  position:absolute; top:60px; right:24px; writing-mode:vertical-rl;
  font-family:var(--font-display); font-weight:700; font-size:.75rem; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(0,0,0,.12); z-index:0;
}
.bg-black .section-tag-right, .bg-orange .section-tag-right{color:rgba(255,255,255,.12);}

/* ============ ABOUT ============ */
.about-collage{position:relative; height:560px;}
.about-img-main{
  position:absolute; top:0; left:10%; width:72%; height:78%; border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:0 40px 70px rgba(0,0,0,.18);
}
.about-img-main img{width:100%; height:100%; object-fit:cover;}
.about-img-float{
  position:absolute; bottom:0; right:0; width:52%; height:46%; border-radius:var(--radius-md);
  overflow:hidden; border:6px solid var(--cream); box-shadow:0 30px 50px rgba(0,0,0,.2);
}
.about-img-float img{width:100%; height:100%; object-fit:cover;}
.about-badge{
  position:absolute; top:22px; left:-18px; background:#fff; border-radius:var(--radius-sm);
  padding:18px 22px; box-shadow:0 24px 50px rgba(0,0,0,.14); display:flex; align-items:center; gap:14px;
  z-index:3;
}
.about-badge .n{font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--orange);}
.about-badge .l{font-size:.78rem; color:var(--gray); max-width:110px; line-height:1.3;}
.about-shape{position:absolute; width:120px; height:120px; border-radius:50%; border:2px dashed var(--orange); opacity:.4; top:-30px; right:6%; z-index:0;}

.about-values{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px;}
.value-pill{
  padding:20px; border-radius:var(--radius-sm); background:#fff; border:1px solid rgba(0,0,0,.06);
  transition:all .35s var(--ease);
}
.value-pill:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.08); border-color:var(--orange);}
.value-pill i{color:var(--orange); font-size:1.3rem; margin-bottom:10px;}
.value-pill h4{font-size:.98rem; margin-bottom:4px;}
.value-pill p{font-size:.82rem; color:var(--gray); margin:0;}

/* ============ SERVICES ============ */
.service-card{
  position:relative; border-radius:var(--radius-md); background:#fff; padding:36px 30px;
  border:1px solid rgba(0,0,0,.06); overflow:hidden; height:100%;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  cursor:pointer;
}
.service-card::before{
  content:""; position:absolute; inset:0; padding:1.5px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--orange), transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s;
}
.service-card:hover{transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,0,0,.1);}
.service-card:hover::before{opacity:1;}
.service-icon{
  width:60px; height:60px; border-radius:18px; background:var(--sand); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:22px;
  transition:all .4s var(--ease);
}
.service-card:hover .service-icon{background:var(--orange); color:#fff; transform:rotate(-8deg) scale(1.05);}
.service-card h3{font-size:1.2rem; margin-bottom:10px;}
.service-card p{color:var(--gray); font-size:.92rem; line-height:1.6; margin-bottom:20px;}
.service-link{font-size:.85rem; font-weight:600; color:var(--orange); display:inline-flex; align-items:center; gap:8px;}
.service-link i{transition:transform .3s;}
.service-card:hover .service-link i{transform:translateX(5px);}

/* Service modal */
.modal-passion .modal-content{border:none; border-radius:var(--radius-lg); overflow:hidden;}
.modal-passion .modal-header{border:none; position:absolute; right:10px; top:10px; z-index:5;}
.modal-passion .btn-close{background-color:#fff; opacity:1; border-radius:50%; padding:10px;}
.service-modal-hero{height:280px; background-size:cover; background-position:center; position:relative;}
.service-modal-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.7), transparent 60%);}
.service-modal-hero .cat{position:absolute; bottom:20px; left:30px; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.6rem;}

/* ============ WHY CHOOSE US ============ */
.stat-card{text-align:center; padding:30px 10px;}
.stat-num{font-family:var(--font-display); font-weight:700; font-size:3rem; color:#fff;}
.stat-num .sfx{color:var(--orange-light);}
.stat-lbl{color:rgba(255,255,255,.65); font-size:.88rem; margin-top:6px;}
.why-feature{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.why-feature i{color:var(--orange); font-size:1.3rem; margin-top:3px;}
.why-feature h4{color:#fff; font-size:1.05rem; margin-bottom:6px;}
.why-feature p{color:rgba(255,255,255,.6); font-size:.9rem; margin:0; line-height:1.6;}

/* ============ PROJECTS ============ */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:50px;}
.filter-btn{
  padding:11px 24px; border-radius:100px; border:1.5px solid rgba(0,0,0,.1); background:transparent;
  font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--charcoal);
  transition:all .3s var(--ease); text-decoration:none; display:inline-block; cursor:pointer;
}
.filter-btn.active, .filter-btn:hover{background:var(--orange); border-color:var(--orange); color:#fff;}

.project-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden; cursor:pointer;
  height:420px; margin-bottom:0;
}
.project-card img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.project-card:hover img{transform:scale(1.09);}
.project-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:30px; color:#fff;
}
.project-cat{
  display:inline-block; padding:6px 16px; border-radius:100px; background:var(--orange);
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; width:fit-content;
}
.project-overlay h3{color:#fff; font-size:1.4rem; margin-bottom:6px;}
.project-overlay p{color:rgba(255,255,255,.7); font-size:.88rem; max-width:90%; opacity:0; max-height:0; overflow:hidden; transition:all .4s var(--ease);}
.project-card:hover .project-overlay p{opacity:1; max-height:80px; margin-top:8px;}
.project-expand{
  position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  color:#fff; transform:scale(0); transition:transform .35s var(--ease);
}
.project-card:hover .project-expand{transform:scale(1);}

/* ============ GALLERY (masonry) ============ */
.masonry{column-count:4; column-gap:16px;}
@media(max-width:1200px){.masonry{column-count:3;}}
@media(max-width:768px){.masonry{column-count:2;}}
@media(max-width:480px){.masonry{column-count:1;}}
.masonry-item{break-inside:avoid; margin-bottom:16px; position:relative; border-radius:var(--radius-sm); overflow:hidden;}
.masonry-item img{width:100%; display:block; transition:transform .6s var(--ease);}
.masonry-overlay{
  position:absolute; inset:0; background:rgba(13,13,13,.55); opacity:0; transition:opacity .35s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; color:#fff;
}
.masonry-item:hover img{transform:scale(1.1);}
.masonry-item:hover .masonry-overlay{opacity:1;}
.masonry-overlay i{font-size:1.4rem; margin-bottom:10px; color:var(--orange-light);}
.masonry-overlay h5{color:#fff; font-size:1rem; margin-bottom:4px;}
.masonry-overlay p{font-size:.78rem; color:rgba(255,255,255,.75); margin:0;}

/* ============ CLIENTS ============ */
.clients-track{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.clients-marquee{display:flex; gap:20px; width:max-content; animation:marquee 28s linear infinite;}
.clients-track:hover .clients-marquee{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.client-glass{
  min-width:200px; height:110px; border-radius:var(--radius-sm); background:#fff;
  border:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--charcoal); font-size:1.1rem;
  transition:all .35s;
}
.client-glass:hover{border-color:var(--orange); transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.08);}

/* ============ TEAM ============ */
.team-card{text-align:center; position:relative;}
.team-photo{
  width:180px; height:180px; border-radius:50%; margin:0 auto 22px; position:relative; overflow:hidden;
  border:4px solid #fff; box-shadow:0 20px 40px rgba(0,0,0,.1);
}
.team-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.team-card:hover .team-photo img{transform:scale(1.1);}
.team-social{
  position:absolute; inset:0; background:rgba(244,98,49,.85); display:flex; align-items:center; justify-content:center;
  gap:10px; opacity:0; transition:opacity .35s;
}
.team-card:hover .team-social{opacity:1;}
.team-social a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .25s;}
.team-social a:hover{background:#fff; color:var(--orange);}
.team-card h4{font-size:1.1rem; margin-bottom:4px; cursor:pointer;}
.team-card .role{color:var(--orange); font-size:.85rem; font-weight:600;}

/* ============ TESTIMONIALS ============ */
.testi-card{
  background:rgba(255,255,255,.06); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md); padding:40px 34px; height:100%; color:#fff;
}
.testi-quote{font-size:2.6rem; color:var(--orange); font-family:Georgia,serif; line-height:1; margin-bottom:10px;}
.testi-card p{color:rgba(255,255,255,.8); font-size:.98rem; line-height:1.7; margin-bottom:26px;}
.testi-person{display:flex; align-items:center; gap:14px;}
.testi-person img{width:52px; height:52px; border-radius:50%; object-fit:cover;}
.testi-person h5{color:#fff; font-size:.95rem; margin:0;}
.testi-person span{color:rgba(255,255,255,.5); font-size:.78rem;}
.testi-stars{color:var(--orange); font-size:.8rem; margin-top:6px;}

/* ============ CONTACT ============ */
.contact-info-card{
  background:#fff; border-radius:var(--radius-md); padding:26px; display:flex; gap:18px; align-items:flex-start;
  border:1px solid rgba(0,0,0,.06); margin-bottom:16px; transition:all .3s;
}
.contact-info-card:hover{border-color:var(--orange); transform:translateX(6px);}
.contact-info-card i{width:46px; height:46px; border-radius:14px; background:var(--sand); color:var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-info-card h5{font-size:.95rem; margin-bottom:4px;}
.contact-info-card p{font-size:.86rem; color:var(--gray); margin:0; line-height:1.5;}

.form-passion{background:#fff; border-radius:var(--radius-lg); padding:46px; box-shadow:0 40px 80px rgba(0,0,0,.08);}
.form-passion .form-control, .form-passion .form-select{
  border:1.5px solid var(--sand); border-radius:var(--radius-sm); padding:14px 18px; font-size:.92rem;
  background:var(--cream);
}
.form-passion .form-control:focus, .form-passion .form-select:focus{border-color:var(--orange); box-shadow:0 0 0 4px rgba(244,98,49,.1); background:#fff;}
.form-passion label{font-size:.82rem; font-weight:600; margin-bottom:8px; color:var(--charcoal);}

.map-wrap{border-radius:var(--radius-lg); overflow:hidden; height:100%; min-height:320px; filter:grayscale(.3) contrast(1.05);}

/* ============ FOOTER ============ */
.footer-passion{background:var(--black); color:rgba(255,255,255,.65); padding-top:100px;}
.footer-passion h5{color:#fff; font-size:1rem; margin-bottom:22px;}
.footer-passion ul{list-style:none; padding:0; margin:0;}
.footer-passion ul li{margin-bottom:12px;}
.footer-passion ul a{font-size:.88rem; color:rgba(255,255,255,.6); transition:color .25s;}
.footer-passion ul a:hover{color:var(--orange);}
.footer-newsletter{display:flex; margin-top:16px; border-radius:100px; overflow:hidden; border:1px solid rgba(255,255,255,.15);}
.footer-newsletter input{flex:1; background:transparent; border:none; padding:14px 20px; color:#fff; font-size:.88rem;}
.footer-newsletter input:focus{outline:none;}
.footer-newsletter button{background:var(--orange); border:none; padding:0 22px; color:#fff;}
.footer-social{display:flex; gap:10px; margin-top:20px;}
.footer-social a{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; transition:all .3s;}
.footer-social a:hover{background:var(--orange); border-color:var(--orange); transform:translateY(-4px);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:60px; padding:26px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem;}

/* ============ FLOATING ACTIONS ============ */
.fab-stack{position:fixed; right:26px; bottom:30px; z-index:900; display:flex; flex-direction:column; gap:14px; align-items:flex-end;}
.fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; box-shadow:0 16px 30px rgba(0,0,0,.25); position:relative;
  transition:transform .3s var(--ease);
}
.fab:hover{transform:scale(1.1); color:#fff;}
.fab.whatsapp{background:#25D366;}
.fab.call{background:var(--black);}
.fab.top{background:var(--orange); opacity:0; pointer-events:none; transform:translateY(20px);}
.fab.top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.fab-pulse::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:inherit; opacity:.6;
  animation:fabPulse 2s infinite;
}
@keyframes fabPulse{0%{transform:scale(1); opacity:.5;} 100%{transform:scale(1.9); opacity:0;}}

.mobile-bottom-nav{display:none;}
@media(max-width:767px){
  .fab-stack{right:16px; bottom:82px;}
  .mobile-bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:900; background:#fff;
    box-shadow:0 -8px 30px rgba(0,0,0,.08); padding:10px 0 8px;
  }
  .mobile-bottom-nav a{flex:1; text-align:center; color:var(--gray); font-size:.68rem;}
  .mobile-bottom-nav a i{display:block; font-size:1.1rem; margin-bottom:4px;}
  .mobile-bottom-nav a.active{color:var(--orange);}
}

/* ============ MISC ============ */
.reveal-text{overflow:hidden;}
.split-heading .word{display:inline-block; overflow:hidden;}
[data-tilt]{transition:transform .1s;}

.swiper-pagination-bullet{background:rgba(255,255,255,.4); opacity:1;}
.swiper-pagination-bullet-active{background:var(--orange); width:22px; border-radius:4px;}
.swiper-button-next, .swiper-button-prev{color:#fff !important; --swiper-navigation-size: 20px;}

.back-to-top-inline{display:inline-flex; align-items:center; gap:8px; color:var(--orange); font-weight:600; font-size:.85rem;}

::selection{background:var(--orange); color:#fff;}

.faq-item{border-bottom:1px solid rgba(0,0,0,.08); padding:22px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.02rem;}
.faq-q i{transition:transform .35s var(--ease); color:var(--orange);}
.faq-item.open .faq-q i{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{color:var(--gray); padding-top:14px; margin:0; line-height:1.7;}

/* ============ PAGE HERO (sub-pages: about, services, projects, blog, contact) ============ */
.page-hero{
  position:relative; overflow:hidden; padding:172px 0 86px;
  background: radial-gradient(ellipse at 20% 20%, #2a1710 0%, var(--black) 55%);
  color:#fff;
}
.page-hero .hero-blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;}
.page-hero .crumbs{font-size:.85rem; color:rgba(255,255,255,.55); margin-bottom:18px;}
.page-hero .crumbs a{color:rgba(255,255,255,.55); text-decoration:none; transition:color .25s;}
.page-hero .crumbs a:hover{color:var(--orange);}
.page-hero .crumbs i{font-size:.65rem; margin:0 8px; opacity:.5;}
.page-hero h1{font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.08;
  color: var(--cream);
   margin-bottom:16px;}
.page-hero h1 .accent{color:var(--orange); font-style:italic; font-weight:600;}
.page-hero p{color:rgba(255,255,255,.68); font-size:1.05rem; max-width:640px; line-height:1.8;}

/* ============ STAT STRIP ============ */
.stat-strip{display:flex; flex-wrap:wrap; gap:48px; margin-top:36px;}
.stat-strip .num{font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--orange); line-height:1;}
.stat-strip .lbl{font-size:.8rem; color:var(--gray); margin-top:6px; max-width:140px;}

/* ============ PROCESS STEPS ============ */
.process-step{display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--sand);}
.process-step:last-child{border-bottom:none;}
.process-step .idx{font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--orange); min-width:52px;}
.process-step h4{margin-bottom:6px;}
.process-step p{color:var(--gray); margin:0; line-height:1.7;}

/* ============ BLOG CARD (grid) ============ */
.blog-card{background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.05); transition:transform .35s var(--ease), box-shadow .35s var(--ease); height:100%; display:flex; flex-direction:column;}
.blog-card:hover{transform:translateY(-8px); box-shadow:0 26px 50px rgba(0,0,0,.12);}
.blog-card .blog-img{height:220px; overflow:hidden;}
.blog-card .blog-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.blog-card:hover .blog-img img{transform:scale(1.08);}
.blog-card .blog-body{padding:26px; display:flex; flex-direction:column; flex:1;}
.blog-card .blog-meta{font-size:.78rem; color:var(--gray-light); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;}
.blog-card h3{font-size:1.15rem; margin-bottom:12px; line-height:1.4;}
.blog-card p{color:var(--gray); font-size:.92rem; line-height:1.7; flex:1;}
.blog-card .blog-readmore{font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--orange); text-decoration:none; margin-top:14px; display:inline-flex; align-items:center; gap:8px;}

/* ============ PAGINATION ============ */
.pg-passion{display:flex; gap:8px; justify-content:center; margin-top:20px;}
.pg-passion button{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--sand); background:#fff; font-family:var(--font-display); font-weight:600; color:var(--black); transition:all .25s;}
.pg-passion button.active, .pg-passion button:hover{background:var(--orange); border-color:var(--orange); color:#fff;}

/* ============ PROJECT DETAIL / SERVICE PAGE EXTRAS ============ */
.sidebar-card{background:var(--cream); border-radius:var(--radius-md); padding:28px;}
.sidebar-card h5{font-family:var(--font-display); font-weight:600; margin-bottom:16px;}
.cat-link{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--sand); color:var(--black); text-decoration:none; font-size:.92rem;}
.cat-link:hover{color:var(--orange);}
.cat-link span{color:var(--gray-light);}

/* ============ TEAM CARD (redesigned) ============ */
.team-card{
  text-align:center; position:relative; background:#fff; border-radius:var(--radius-md);
  padding:30px 20px 26px; box-shadow:0 14px 34px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.04);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); height:100%;
}
.team-card:hover{transform:translateY(-8px); box-shadow:0 26px 54px rgba(0,0,0,.12);}
.team-card .team-photo{width:140px; height:140px; margin-bottom:20px;}
.team-card h4{font-size:1.05rem; margin-bottom:2px; cursor:default;}
.team-card .role{display:block; margin-bottom:16px;}
.team-bio-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px; padding:9px 20px;
  border-radius:100px; border:1.5px solid var(--sand); background:var(--cream);
  font-family:var(--font-display); font-weight:600; font-size:.8rem; color:var(--black);
  transition:all .3s var(--ease); cursor:pointer;
}
.team-bio-btn:hover{background:var(--orange); border-color:var(--orange); color:#fff;}

/* ============ TESTIMONIALS SWIPER (3-up) ============ */
.testi-swiper{padding-bottom:10px;}
.testi-swiper .swiper-slide{height:auto; display:flex;}
.testi-swiper .testi-card{width:100%;}
.testi-swiper .swiper-pagination-bullet{background:rgba(255,255,255,.4); opacity:1;}
.testi-swiper .swiper-pagination-bullet-active{background:var(--orange);}

/* ============ BLOG PAGINATION LINKS ============ */
.pg-passion a, .pg-passion span{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--sand); background:#fff;
  font-family:var(--font-display); font-weight:600; color:var(--black); transition:all .25s;
  display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:.9rem;
}
.pg-passion a:hover, .pg-passion a.active{background:var(--orange); border-color:var(--orange); color:#fff;}
.pg-passion span.disabled{opacity:.35; pointer-events:none;}

/* ============ MOBILE NAV POLISH ============ */
.nav-overlay{
  position:fixed; inset:0; background:rgba(13,13,13,.55); backdrop-filter:blur(2px);
  z-index:998; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.nav-overlay.show{opacity:1; pointer-events:auto;}
@media(max-width:991px){
  .nav-links{padding:28px 28px 28px; display:flex; justify-content:flex-start; z-index:999;}
  .nav-links a{display:flex; align-items:center; justify-content:space-between;}
  .nav-links a::after{display:none;}
  .nav-links a.active{color:var(--orange);}
  .mobile-nav-quote{
    margin-top:20px; width:100%; justify-content:center; display:inline-flex;
  }
}

/* ============ MOBILE BOTTOM NAV (polish) ============ */
@media(max-width:767px){
  .mobile-bottom-nav{
    border-radius:20px 20px 0 0; padding:10px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 34px rgba(0,0,0,.12);
  }
  .mobile-bottom-nav a{padding:4px 2px; border-radius:12px; transition:background .25s, color .25s;}
  .mobile-bottom-nav a.active{background:rgba(244,98,49,.1);}
}

/* ============ SMALL-DEVICE FIT ============ */
@media(max-width:576px){
  .container-xl{padding-left:18px; padding-right:18px;}
  .section-pad{padding:64px 0;}
  .page-hero{padding:130px 0 56px;}
  .hero{padding-top:100px;}
  .hero-stats{gap:18px;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .hero-ctas .btn-passion, .hero-ctas .btn-outline-passion{justify-content:center;}
  .stat-strip{gap:24px;}
  .service-modal-hero{height:180px;}
  .service-modal-hero .cat{font-size:1.2rem; left:20px; bottom:14px;}
  .modal-body{padding:28px 20px !important;}
  .form-passion{padding:26px 20px;}
  .sidebar-card{padding:20px;}
  .contact-info-card{padding:18px;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .testi-card{padding:28px 22px;}
  .filter-bar{gap:8px;}
  .filter-bar .filter-btn, .filter-bar a.filter-btn{padding:8px 14px; font-size:.8rem;}
  .team-card{padding:24px 14px 20px;}
  .team-card .team-photo{width:110px; height:110px;}
  .project-detail-swiper{min-height:240px;}
  .blog-card .blog-img{height:180px;}
}