/* =========================================================



   SociaFly — Bootstrap 5 custom styles (centered layout)



   Typeface: Plus Jakarta Sans



   ========================================================= */







:root {



  --font: "PT Sans Narrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;







  --paper:    #f6f4ee;   /* warm cream background */



  --paper-2:  #efece2;   /* beige card */



  --ink:      #1a1a1a;   /* primary dark text */



  --ink-2:    #2a2a2a;



  --gray:     #9ca3af;   /* the signature mid-gray accent */



  --gray-2:   #6b7280;   /* body copy gray */



  --gray-3:   #9ca3af;



  --line:     #e9eaec;



  --soft:     #f4f5f6;   /* light section background */



  --soft-2:   #eceef0;



  --dark:     #1e1e20;   /* dark section background */



  --dark-2:   #262629;   /* dark cards */



  --dark-foot:#232325;



  --white:    #ffffff;



   --n-800: #262626;



   --n-900: #171717;



  --n-950: #0a0a0a;



  --muted:    #6f6a60;   /* body copy */



   --dark-line:rgba(255,255,255,0.08);



}







* { box-sizing: border-box; }



html { scroll-behavior: smooth; }



body {



 font-family: "PT Sans Narrow", sans-serif;



  color: var(--ink);



  background: #fff;



  -webkit-font-smoothing: antialiased;



  -moz-osx-font-smoothing: grayscale;



  overflow-x: hidden;



}



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



.container-xl { max-width: 1200px; }



h1, h2, h3 { 



font-family: "Montserrat", sans-serif !important;



font-weight:100 !important;



}

.hero-sub { font-family: "Montserrat", sans-serif !important; text-transform:uppercase; }

.hero-lead { font-family: "Montserrat", sans-serif !important;  }

#about p {



  font-family: "PT Sans Narrow", sans-serif;



  font-weight: 400;



  font-style: normal;



}



#contact p {



  font-family: "PT Sans Narrow", sans-serif;



  font-weight: 400;



  font-style: normal;



}



.service-desc {



  font-family: "PT Sans Narrow", sans-serif;



  font-weight: 400;



  font-style: normal;



}



.step-desc {



  font-family: "PT Sans Narrow", sans-serif;



  font-weight: 400;



  font-style: normal;



}



.team-bio {



  font-family: "PT Sans Narrow", sans-serif;



  font-weight: 400;



  font-style: normal;



  }



   



/* ---------- shared type ---------- */



.eyebrow {



  font-size: 12px;



  font-weight: 700;



  letter-spacing: 0.28em;



  text-transform: uppercase;



  color: var(--gray);



}



.eyebrow-light { color: #8a8d93; }



.hero-badges {



    display: flex;



    flex-wrap: wrap;



    gap: 1rem 1.5rem;



    align-items: center;



    margin-bottom: 1.75rem;



    justify-content: center;



    align-content: center;



}



.kicker {



  display: inline-block;



  font-size: 11px;



  font-weight: 600;



  letter-spacing: 0.22em;



  text-transform: uppercase;



  color: var(--gray);



}



.kicker-light { color: rgba(255,255,255,0.45); }



.badge-soft {



  display: inline-flex; align-items: center; gap: .5rem;



  background: var(--white); border: 1px solid var(--line);



  border-radius: 999px; padding: .4rem .85rem;



  font-size: .82rem; font-weight: 500; color: var(--ink-2);



}



.badge-soft .dot { width: 7px; height: 7px; border-radius: 50%; background: #2fae62; }



.badge-bare { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); }



.star-ic { width: 14px; height: 14px; color: var(--ink); }



.h-big {



  font-weight: 800;



  font-size: clamp(2rem, 4.4vw, 3.25rem);



  line-height: 1.08;



  letter-spacing: -0.02em;



  color: var(--ink);



  margin: 0;



}



.t-gray   { color: var(--gray); }



.t-gray-d { color: #8d9097; }







.body-copy { color: var(--gray-2); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1rem; }



.body-copy strong { color: var(--ink); font-weight: 700; }



.muted-copy { color: #9b9ea4; font-size: 1.02rem; line-height: 1.7; }



.lead-center { max-width: 640px; margin-inline: auto; }







.head-block { max-width: 720px; }







/* =========================================================



   WORDMARK



   ========================================================= */



.wordmark-sm {



  font-weight: 800;



  font-size: 1.4rem;



  letter-spacing: -0.02em;



  color: var(--ink);



  text-decoration: none;



}



.wm-gray  { color: var(--gray); }



.wm-gray-f { color: #6c6f76; }







.wordmark-hero {



  font-weight: 800;



  font-size: clamp(3.2rem, 13vw, 9.5rem);



  line-height: .95;



  letter-spacing: -0.035em;



  color: var(--ink);



  margin: 0 0 .5rem;



}



.wordmark-hero .wm-gray {



  background: linear-gradient(90deg, #9ca3af, #c4c8cd);



  -webkit-background-clip: text;



  background-clip: text;



  -webkit-text-fill-color: transparent;



}







/* =========================================================



   NAVBAR



   ========================================================= */



.site-header {



  background: transparent;



  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;



}



.site-header.scrolled {



  background: rgba(255,255,255,0.85);



  backdrop-filter: blur(12px);



  -webkit-backdrop-filter: blur(12px);



  box-shadow: 0 1px 0 rgba(0,0,0,0.05);



}



.site-header .navbar { min-height: 76px; }



.navbar-nav .nav-link {



  font-size: .95rem;



  font-weight: 500;



  color: #4b4d52;



  padding: .4rem .9rem;



  transition: color .2s ease;



}



.navbar-nav .nav-link:hover { color: var(--ink); }



.navbar-toggler svg { color: var(--ink); }







/* =========================================================



   BUTTONS



   ========================================================= */



.btn-dark-pill,



.btn-light-pill {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: .5rem;



  border-radius: 999px;



  font-weight: 600;



  font-size: .9rem;



  padding: .6rem 1.4rem;



  border: 1px solid transparent;



  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;



  text-decoration: none;



  white-space: nowrap;



}



.btn-lg-pill   { padding: .95rem 2rem; font-size: .98rem; }



.btn-block-pill{ width: 100%; padding: 1rem; border-radius: 14px; }







.btn-dark-pill { background: var(--ink); color: #fff; }



.btn-dark-pill:hover { background: #000; color: #fff; transform: translateY(-1px); }







.btn-light-pill { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); }



.btn-light-pill:hover { border-color: #cfd2d6; color: var(--ink); }







.ic-arrow { width: 18px; height: 18px; transition: transform .2s ease; }



.btn-dark-pill:hover .ic-arrow { transform: translateX(3px); }



.ic-send { width: 18px; height: 18px; }



.btn-ghost { border-radius:999px; background: transparent; color: #fff; border-color: rgba(255,255,255,0.2); justify-content: center; padding: .85rem 1.4rem; }



.btn-ghost:hover { border-color: rgba(255,255,255,0.5); }











/* =========================================================



   HERO



   ========================================================= */



.hero {



  position: relative;



  padding: 150px 0 120px;



  background:



    radial-gradient(120% 90% at 50% 0%, #fafbfc 0%, #f1f2f4 60%, #eceef0 100%);



}



.hero-sub {



  font-size: clamp(1.2rem, 2.4vw, 1.7rem);



  font-weight: 500;



  color: var(--gray-2);



  margin: .25rem 0 1.25rem;



}



.hero-lead {



  max-width: 600px;



  color: var(--gray-2);



  font-size: 1.05rem;



  line-height: 1.7;



  margin-bottom: 2.25rem;



}



.hero-actions {



  display: flex;



  justify-content: center;



  flex-wrap: wrap;



  gap: 1rem;



}



@media (max-width: 480px) {



  .hero-actions { flex-direction: column; align-items: stretch; }



}







/* =========================================================



   SECTIONS



   ========================================================= */



.section { padding: 100px 0; }



@media (min-width: 992px) { .section { padding: 120px 0; } }



.section-soft { background: var(--soft); }



.section-dark { background: var(--dark); color: #fff; }







/* ---------- Bento grid ---------- */



.bento {



  display: grid;



  grid-template-columns: 1.5fr 1fr 1fr;



  grid-template-rows: auto auto;



  gap: 16px;



  margin-top:100px;



  text-align:left;



}



.bento-img {



  grid-row: 1 / span 2;



  position: relative;



  min-height: 360px;



  border-radius: 22px;



  background-size: cover; background-position: center;



  overflow: hidden;



}



.bento-img-overlay {



  position: absolute; inset: 0;



  display: flex; flex-direction: column; justify-content: flex-end;



  padding: 1.75rem;



  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%, transparent);



}



.bento-img-title { color: #fff; font-weight: 700; font-size: 1.35rem; line-height: 1.25; margin: .5rem 0 0; max-width: 22ch; }







.bento-card {



  background: var(--white);



  border: 1px solid var(--line);



  border-radius: 22px;



  padding: 1.5rem;



  display: flex; flex-direction: column;



  min-height: 172px;



}



.bento-num { font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; margin-top: .75rem; }



.bento-sub { color: var(--muted); font-size: .9rem; margin: .35rem 0 0; }



.bento-dark { background: var(--dark); color: #fff; border-color: var(--dark); }



.bento-dark .bento-sub { color: rgba(255,255,255,0.6); }



.bento-dark .plus { color: rgba(255,255,255,0.5); font-size: 1.2rem; line-height: 1; }



.bento-beige { background: var(--paper-2); border-color: var(--line); }



.bento-promise { font-weight: 700; font-size: 1.15rem; line-height: 1.35; margin: 0; }







.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }



.tag {



  font-size: .76rem; font-weight: 600; color: #1e1e20;



  border: 1px solid var(--line); background: var(--white);



  border-radius: 999px; padding: .25rem .7rem;



}







@media (max-width: 860px) {



  .bento { grid-template-columns: 1fr 1fr; }



  .bento-img { grid-row: auto; grid-column: 1 / -1; min-height: 280px; }



}



@media (max-width: 520px) {



  .bento { grid-template-columns: 1fr; }



}







/* =========================================================



   MARQUEE



   ========================================================= */



.marquee-wrap {



  border-top: 1px solid #A9A9A9;



  border-bottom: 1px solid #A9A9A9;



  background: #A9A9A9;



  overflow: hidden;



}



.marquee-track { display: flex; align-items: center; gap: 2.5rem; padding: 1.5rem 0; width: max-content; animation: marquee 30s linear infinite; }



.m-item { font-size: 1.5rem; font-weight: 500; color: #FFF; white-space: nowrap; }



.m-sep { color: #FFF; }



@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }











/* =========================================================



   ABOUT



   ========================================================= */



   



.check-grid { margin-top: 1.5rem; }



.check-card {



  display: flex; align-items: center; gap: .75rem;



  background: var(--white); border: 1px solid var(--line);



  border-radius: 14px; padding: .9rem 1rem;



  font-size: .92rem; font-weight: 500; height: 100%;



}



.check-dot {



  flex: none; width: 24px; height: 24px; border-radius: 50%;



  background: var(--ink); color: var(--paper);



  display: inline-flex; align-items: center; justify-content: center;



}



.check-dot svg { width: 14px; height: 14px; }







.about-media { position: relative; }



.about-img { width: 100%; border-radius: 22px; display: block; aspect-ratio: 4/4.4; object-fit: cover; }



.glove-badge {



  position: absolute; top: -30px; right: 0px;



  width: 92px; height: 92px; border-radius: 50%;



  background: var(--ink); color: var(--paper);



  display: flex; flex-direction: column; align-items: center; justify-content: center;



  font-weight: 800; font-size: 1.4rem; line-height: 1; animation: float-slow 6s ease-in-out infinite;



}

@keyframes float-slow {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-12px);

  }

}

.glove-badge span { font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; color: rgba(255,255,255,0.7); }



.float-quote {



  position: absolute; left: -8px; bottom: 24px;



  width: min(320px, 80%);



  background: var(--white); border: 1px solid var(--line);



  border-radius: 18px; padding: 1.1rem 1.25rem;



  box-shadow: 0 24px 50px -28px rgba(0,0,0,.35);



}



.float-quote .stars { color: var(--ink); font-size: .8rem; letter-spacing: 2px; }



.float-quote p { font-size: .92rem; line-height: 1.5; margin: .5rem 0 .4rem; color: var(--ink-2); }



.float-by { font-size: .8rem; color: var(--muted); }











/* =========================================================



   WORK / PORTFOLIO



   ========================================================= */



   .arrow-circle {



  display: inline-flex; align-items: center; justify-content: center;



  width: 30px; height: 30px; border-radius: 50%;



  background: var(--paper); color: var(--ink);



  transition: transform .2s ease;



}



.arrow-circle svg { width: 15px; height: 15px; }



.arrow-circle.sm { width: 34px; height: 34px; background: var(--paper-2); }



.arrow-circle.sm svg { width: 16px; height: 16px; }



.arrow-circle.out { background: transparent; border: 1px solid var(--line); }



.btn-ink:hover .arrow-circle { transform: rotate(45deg); }



.work-link {



  display: inline-flex; align-items: center; gap: .4rem;



  font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none;



}



.ic-tiny { width: 16px; height: 16px; }



.work-link:hover .ic-tiny, .footer-email:hover .ic-tiny { transform: translate(2px,-2px); transition: transform .2s; }







.work-card {



  display: block; text-decoration: none; color: inherit;



  background: var(--white); border: 1px solid var(--line);



  border-radius: 22px; overflow: hidden; height: 100%;



  transition: transform .2s ease, box-shadow .2s ease;



}



.work-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(0,0,0,.3); }



.work-img {



  position: relative;



  aspect-ratio: 16/10.5;



  background-size: cover; background-position: center;



}



.work-tag {



  position: absolute; top: 14px; left: 14px;



  font-size: .68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;



  background-color: #000; color: #FFF;



  border-radius: 999px; padding: .3rem .75rem;



}



.work-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.5rem; }



.work-title { font-weight: 700; font-size: 1.18rem; margin: 0; }



.work-meta { font-size: .85rem; color: var(--muted); margin: .25rem 0 0; }



.work-card:hover .arrow-circle.out { background: var(--ink); color: var(--paper); border-color: var(--ink); }











/* =========================================================



   APPROACH (DARK)



   ========================================================= */



.approach, .cta-panel { position: relative; overflow: hidden; }



.dot-grid {



  position: absolute; inset: 0;



  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);



  background-size: 22px 22px; pointer-events: none;



}



.step-card {



  height: 100%;



  background: var(--dark-2);



  border: 1px solid var(--dark-line);



  border-radius: 16px;



  padding: 1.5rem 1.35rem;



  transition: border-color .2s ease, transform .2s ease;



}



.step-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-4px); }



.step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; }



.step-no { font-weight: 700; font-size: 1.6rem; color: rgba(255,255,255,0.85); }



.step-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.3); }



.step-title { font-weight: 700; font-size: 1.2rem; color: #fff; margin: 0 0 .5rem; }



.step-desc { font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,0.55); margin: 0; }



@media (min-width: 992px) { .approach .col-lg { flex: 1 0 0; } }











/* =========================================================



   TEAM



   ========================================================= */



.team-card {



  display: flex; gap: 0;



  background: var(--paper-2); border: 1px solid var(--line);



  border-radius: 22px; overflow: hidden; height: 100%;



}



.team-photo { flex: none; width: 42%; max-width: 240px; }



.team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); display: block; }



.team-body { padding: 1.75rem; display: flex; flex-direction: column; }



.team-name { font-weight: 800; font-size: 1.55rem; margin: 0; letter-spacing: -0.01em; }



.team-bio { color: var(--muted); font-size: .94rem; line-height: 1.65; margin: 1rem 0 1.25rem; }



.team-body .tag-row { margin-top: auto; }



@media (max-width: 575.98px) {



  .team-card { flex-direction: column; }



  .team-photo { width: 100%; max-width: none; aspect-ratio: 16/10; }



}











/* =========================================================



   QUOTE



   ========================================================= */



.quote-sec { padding-top: 110px; padding-bottom: 110px; background:radial-gradient(120% 90% at 50% 0%, #fafbfc 0%, #f1f2f4 60%, #eceef0 100%); }



.stars { color: var(--ink); letter-spacing: 4px; }



.stars-lg { font-size: 1.1rem; }



.big-quote {



  font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.5rem);



  line-height: 1.3; letter-spacing: -0.02em; color: var(--ink);



  max-width: 22ch; margin: 0 auto 2rem;



}



.quote-by { display: inline-flex; align-items: center; gap: .85rem; }



.quote-avatar {



  width: 46px; height: 46px; border-radius: 50%;



  background: linear-gradient(150deg, #b7b1a6, #8a857b); color: #fff;



  display: inline-flex; align-items: center; justify-content: center;



  font-weight: 700; font-size: .9rem;



}



.qb-name { font-weight: 700; font-size: .95rem; }



.qb-role { font-size: .85rem; color: var(--muted); }











/* =========================================================



   CTA



   ========================================================= */



.cta-sec { padding: 0 0 96px; background: var(--paper); }



.cta-panel {



  background: var(--dark); color: #fff;



  border-radius: 30px; padding: 3rem;



}



@media (min-width: 992px) { .cta-panel { padding: 4rem; } }



.cta-copy { color: rgba(255,255,255,0.6); font-size: 1.04rem; line-height: 1.7; margin: 0; max-width: 44ch; }







.email-field {



  display: flex; align-items: center;



  background: var(--white); border-radius: 999px; padding: .4rem .45rem .4rem 1.25rem;



}



.email-field input {



  flex: 1; border: 0; background: transparent; outline: none;



  font-size: 1rem; color: var(--ink); font-family: inherit;



}



.email-field input::placeholder { color: #9a948a; }



.email-go {



  flex: none; width: 44px; height: 44px; border-radius: 50%;



  background: var(--ink); color: var(--paper); border: 0;



  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;



  transition: transform .2s ease;



}



.email-go svg { width: 18px; height: 18px; }



.email-go:hover { transform: rotate(45deg); }



.cta-note { margin: .85rem 0 0; font-size: .88rem; color: rgba(255,255,255,0.65); }







.cta-stats {



  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;



  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--dark-line);



}



.cta-stat-val { font-weight: 700; font-size: 1.15rem; color: #fff; margin-top: .4rem; }



@media (max-width: 575.98px) { .cta-panel { padding: 2rem; } }







/* ---------- Services (dark) ---------- */



.dark-grid {



  position: absolute; inset: 0;



  opacity: 0.06;



  background-image:



    linear-gradient(to right, #fff 1px, transparent 1px),



    linear-gradient(to bottom, #fff 1px, transparent 1px);



  background-size: 80px 80px;



}



.dark-glow {



  position: absolute;



  top: -160px; left: 33%;



  width: 500px; height: 500px;



  border-radius: 50%;



  background: rgba(255,255,255,0.05);



  filter: blur(64px);



}



.muted-copy { color: var(--n-400); font-size: 15px; line-height: 1.6; }







.services-grid {



  display: grid;



  grid-template-columns: 1fr;



  gap: 1px;



  background: var(--n-800);



  border: 1px solid var(--n-800);



  border-radius: 16px;



  overflow: hidden;



}



@media (min-width: 576px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }



@media (min-width: 992px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }







.service-card {



  background: var(--n-950);



  padding: 2rem;



  transition: background-color .25s ease;



}



@media (min-width: 992px) { .service-card { padding: 2.5rem; } }



.service-card:hover { background: var(--n-900); }







.service-head {



  display: flex;



  align-items: flex-start;



  justify-content: space-between;



  margin-bottom: 2.5rem;



}



.service-icon {



  width: 48px; height: 48px;



  border-radius: 12px;



  border: 1px solid var(--n-700);



  display: inline-flex;



  align-items: center;



  justify-content: center;



  color: var(--n-200);



  transition: border-color .25s ease, color .25s ease;



}



.service-icon svg { width: 24px; height: 24px; stroke-width: 1.4; }



.service-card:hover .service-icon { border-color: var(--n-500); color: #fff; }



.service-no { font-size: 11px; letter-spacing: 0.25em; color: var(--n-600); }







.service-title {



  font-size: clamp(1.5rem, 2vw, 1.625rem);



  line-height: 1.3;



  color: #fff;



  margin: 0 0 .75rem;



}



.service-desc { color: var(--n-400); font-size: 15px; line-height: 1.6; margin: 0; }







/* =========================================================



   CONTACT



   ========================================================= */



.contact-list li {



  display: flex;



  align-items: center;



  gap: 1rem;



  margin-bottom: 1.4rem;



}



.contact-icon {



  flex: none;



  width: 50px; height: 50px;



  border-radius: 14px;



  background: #fff;



  border: 1px solid var(--line);



  display: flex; align-items: center; justify-content: center;



  color: var(--ink);



}



.contact-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }



.contact-label {



  display: block;



  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;



  text-transform: uppercase; color: var(--gray);



}



.contact-value { display: block; font-weight: 600; color: var(--ink); margin-top: 2px; }







.form-card {



  background: #fff;



  border: 1px solid var(--line);



  border-radius: 22px;



  padding: 2.25rem;



  box-shadow: 0 24px 60px -34px rgba(0,0,0,.22);



}



@media (min-width: 992px) { .form-card { padding: 2.75rem; } }



.form-label-up {



  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;



  text-transform: uppercase; color: var(--gray-2); margin-bottom: .5rem;



}



.field {



  border: 1px solid var(--line);



  background: #fbfbfc;



  border-radius: 12px;



  padding: .85rem 1rem;



  font-size: .98rem;



  color: var(--ink);



  box-shadow: none;



}



.field::placeholder { color: #b4b7bc; }



.field:focus {



  border-color: var(--ink);



  background: #fff;



  box-shadow: 0 0 0 3px rgba(26,26,26,0.08);



  outline: none;



}



textarea.field { resize: vertical; min-height: 130px; }



.form-note { margin-top: 1rem; font-size: .88rem; color: var(--gray-2); }







/* =========================================================



   FOOTER



   ========================================================= */



.site-footer { background: var(--dark-foot); color: #9b9ea4; padding: 72px 0 36px; }



.footer-wordmark {



  font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em;



  color: #fff; text-decoration: none;



}



.footer-tag { color: #8d9097; font-size: .95rem; line-height: 1.7; max-width: 330px; }



.footer-head {



  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;



  text-transform: uppercase; color: #7c7f85; margin-bottom: 1.25rem;



}



.footer-list li { margin-bottom: .85rem; }



.footer-list a { color: #b6b9be; text-decoration: none; font-size: .98rem; transition: color .2s ease; }



.footer-list a:hover { color: #fff; }







.footer-bottom {



  margin-top: 3rem;



  padding-top: 1.75rem;



  border-top: 1px solid rgba(255,255,255,0.08);



  display: flex; flex-direction: column; gap: .75rem;



  justify-content: space-between;



  font-size: .9rem; color: #7c7f85;



}



@media (min-width: 576px) { .footer-bottom { flex-direction: row; align-items: center; } }



.footer-credit { color: #6c6f76; }







/* =========================================================



   MOBILE NAV PANEL



   ========================================================= */



@media (max-width: 991.98px) {



  .site-header { background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(0,0,0,.05); }



  .navbar-collapse {



    background: #fff;



    margin-top: .5rem;



    padding: 1rem .25rem 1.25rem;



    border-top: 1px solid var(--line);



  }



  .navbar-nav .nav-link { padding: .55rem .25rem; }



  .navbar-nav .btn-dark-pill { width: 100%; }



}







@media (max-width: 575.98px) {



  .stats-row { gap: 1.75rem; }



  .orbit-center { left: 50%; }

.wordmark-hero img {

    width: 100%;

}

}







/* =========================================================



   ACCESSIBILITY



   ========================================================= */



@media (prefers-reduced-motion: reduce) {



  html { scroll-behavior: auto; }



  .btn-dark-pill:hover .ic-arrow { transform: none; }



  .svc-card:hover, .why-card:hover, .team-card:hover, .btn-dark-pill:hover { transform: none; }



}



a:focus-visible, .btn:focus-visible, .navbar-toggler:focus-visible, .field:focus-visible {



  outline: 2px solid var(--ink); outline-offset: 2px;



}



.section-dark a:focus-visible { outline-color: #fff; }


/* Portfolio image: grayscale by default, original color on hover */
.work-img { position: relative; overflow: hidden; }

.work-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;      /* parent ka inline background le lega */
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  transition: filter .45s ease, transform .45s ease;
  z-index: 0;
}

/* Hover pe original color */
.work-card:hover .work-img::before {
  filter: grayscale(0);
}

/* Tag ko filter se bahar rakho, image ke upar */
.work-tag { z-index: 2; }