@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
        
        * { margin: 0; padding: 0; box-sizing: border-box; }

        html {
        height: 100%;
            
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: #ffffff;
            font-size: 14px;
            zoom: 80%
        }
        
        .heading-font {
            font-family: 'Playfair Display', serif;
        }
        
        /* Page Navigation Styles - True Multi-Page */
        .page {
            display: none;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }
        
        .page.active-page {
            display: block;
            opacity: 1;
            animation: pageFadeIn 0.5s ease forwards;
        }
        
        @keyframes pageFadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Card hover effects */
        .expertise-card, .compliance-card {
            background: white;
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        
        .expertise-card:hover, .compliance-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 50px rgba(0,0,0,0.15);
        }
        
        .compliance-header {
            background: linear-gradient(135deg, #0A2319, #14532d);
            color: white;
            padding: 1.75rem;
            text-align: center;
            border-radius: 24px 24px 0 0;
        }
        
        .nav-link {
            transition: all 0.2s ease;
            position: relative;
        }
        
        .nav-link.active-nav {
            color: #fbbf24;
        }
        
        .nav-link.active-nav::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 2px;
            background: #fbbf24;
            border-radius: 2px;
        }
        
        /* Mobile menu */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0A2319;
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }
        
        .mobile-menu.open {
            transform: translateX(0);
        }
        
        .map-frame {
            width: 100%;
            height: 380px;
            border: none;
            border-radius: 16px;
        }
        
        .logo {
            height: 70px;
            object-fit: contain;
            filter: drop-shadow(0 0 6px rgba(245, 176, 65, 0.4));
        }
        
        /* Button styles */
        .btn-primary {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.4);
        }
        
        /* Stat counter animation placeholder */
        .stat-number {
            font-weight: 800;
        }

        .faq-question { cursor: pointer; }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            padding-top: 0;
            padding-bottom: 0;
            transition: max-height .45s cubic-bezier(.16,.84,.44,1), padding .3s ease;
        }
        .faq-answer.faq-open {
            padding-top: 0.25rem;
            padding-bottom: 1.25rem;
        }

            /* Smooth transitions for cards */
    .expertise-card {
        transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }
    
    /* Subtle shadow enhancement on hover */
    .group:hover .shadow-lg {
        box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.15);
    }
    
    /* Gold gradient text option for headings (if desired) */
    .gold-gradient-text {
        background: linear-gradient(135deg, #b8860b, #d4af37);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }


      /* ── CLIENTS ── */
  .clients {
    padding: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    background: var(--ink2);
  }

  .clients::before, .clients::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 200px;
    z-index: 2;
  }

  .clients::before { left: 0; background: linear-gradient(90deg, var(--ink2), transparent); }
  .clients::after { right: 0; background: linear-gradient(-90deg, var(--ink2), transparent); }

  .ticker-label {
    text-align: center;
    padding: 20px;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 4px;
    color: var(--muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
  }

.ticker {
  overflow: hidden;
  width: 100%;
  position: relative;

  cursor: pointer;
  transition: all 0.3s ease;
}

.effect{
    cursor: pointer;
    transition: all 0.5s ease;
}

.effect:hover {
  background: #f0ce93; /* amber-500 */
  box-shadow: 0 0 20px rgba(236, 179, 81, 0.7);
}

  .ticker-track {
    display: flex;
    gap: 80px;
    animation: ticker 35s linear infinite;
    width: max-content;
    padding: 24px 0;
    align-items: center;
  }

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

@keyframes heroMove {
    0% {
        background-size: 110%;
        background-position: 50% 40%;
    }
    50% {
        background-size: 115%;
        background-position: 55% 45%;
    }
    100% {
        background-size: 120%;
        background-position: 60% 50%;
    }
}

  .client-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s;
  }

  .client-logo:hover { color: var(--gold); }

  .cl-sep { width: 4px; height: 4px; background: var(--gold); opacity: 0.3; transform: rotate(45deg); }

  
 
/* =========================
   ANIMATIONS
========================= */

/* Smooth cinematic movement */
@keyframes kb1{
  0%   {transform:scale(1.08) translate3d(0,0,0);}
  100% {transform:scale(1.18) translate3d(-2%,-1%,0);}
}

@keyframes kb2{
  0%   {transform:scale(1.06) translate3d(0,0,0);}
  100% {transform:scale(1.16) translate3d(-1.5%,-2%,0);}
}

@keyframes kb3{
  0%   {transform:scale(1.07) translate3d(-1%,0,0);}
  100% {transform:scale(1.17) translate3d(1.5%,-1%,0);}
}

@keyframes kb4{
  0%   {transform:scale(1.03) translate3d(1%,1%,0);}
  100% {transform:scale(1.10) translate3d(-1%,-1%,0);}
}

@keyframes kb5{
  0%   {transform:scale(1.04) translate3d(0,-1%,0);}
  100% {transform:scale(1.11) translate3d(1%,1%,0);}
}

@keyframes ok-up{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes ok-bar{
  from{
    width:0;
    opacity:0;
  }
  to{
    width:44px;
    opacity:1;
  }
}

@keyframes ok-prg{
  from{width:0%;}
  to{width:100%;}
}

/* =========================
   HERO SECTION
========================= */

.ok-hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:580px;
  max-height:920px;
  overflow:hidden;
  background:#071a10;
  font-family:'Georgia','Times New Roman',serif;
}

/* =========================
   SLIDES
========================= */

.ok-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.4s ease;
  pointer-events:none;
}

.ok-slide.on{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   BACKGROUND IMAGE
========================= */

.ok-bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  background-repeat:no-repeat;

  /* IMPORTANT */
  background-size:cover;

  /* keeps image elegant */
 background-position:center center;

  background-color:#071a10;

  will-change:transform;
  transition:transform 8s ease;
}



/* Cinematic movement */
.ok-slide.on .ok-bg{
  animation-duration:10s;
  animation-timing-function:ease-in-out;
  animation-fill-mode:both;
}

.ok-slide:nth-child(1).on .ok-bg{animation-name:kb1;}
.ok-slide:nth-child(2).on .ok-bg{animation-name:kb2;}
.ok-slide:nth-child(3).on .ok-bg{animation-name:kb3;}
.ok-slide:nth-child(4).on .ok-bg{animation-name:kb4;}
.ok-slide:nth-child(5).on .ok-bg{animation-name:kb5;}

/* =========================
   IMAGE PATHS
========================= */

.ok-slide:nth-child(1) .ok-bg{
  background-image:url('images/Okwiriadvocates.png');
}

.ok-slide:nth-child(2) .ok-bg{
  background-image:url('images/Bianca.jpg');
  background-position:right center;
  
}

.ok-slide:nth-child(3) .ok-bg{
  background-image:url('images/wakiopic3.jpeg');
  background-position:center top;
}

.ok-slide:nth-child(4) .ok-bg{
  background-image:url('images/Services.png');
}

.ok-slide:nth-child(5) .ok-bg{
  background-image:url('images/Find_us.png');
}

/* =========================
   OVERLAYS
========================= */

.ok-ov1{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    to right,
    rgba(7,26,16,.95) 0%,
    rgba(7,26,16,.78) 35%,
    rgba(7,26,16,.25) 100%
  );
}

.ok-ov2{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    to top,
    rgba(7,26,16,.92) 0%,
    transparent 55%
  );
}

/* =========================
   FIRM BADGE
========================= */

.ok-badge{
  position:absolute;
  top:30px;
  left:52px;
  display:flex;
  align-items:center;
  gap:11px;
  z-index:30;
}

.ok-badge-bar{
  width:3px;
  height:38px;
  background:#d97706;
}

.ok-badge-name{
  color:#fff;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.3;
}

.ok-badge-sub{
  color:#d97706;
  font-family:Arial,sans-serif;
  font-size:9px;
  letter-spacing:.25em;
  text-transform:uppercase;
  display:block;
  margin-top:3px;
}

/* =========================
   COUNTER
========================= */

.ok-ctr{
  position:absolute;
  top:36px;
  right:52px;
  color:rgba(255,255,255,.35);
  font-family:Arial,sans-serif;
  font-size:11px;
  letter-spacing:.2em;
  z-index:30;
}

.ok-ctr b{
  color:rgba(255,255,255,.82);
  font-weight:400;
}

/* =========================
   CONTENT
========================= */

.ok-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 52px;
  z-index:20;
  max-width:680px;
}

.ok-slide.on .ok-ey {animation:ok-up .7s .25s both;}
.ok-slide.on .ok-rl {animation:ok-bar .6s .42s both;}
.ok-slide.on .ok-h  {animation:ok-up .8s .52s both;}
.ok-slide.on .ok-p  {animation:ok-up .8s .72s both;}
.ok-slide.on .ok-bt {animation:ok-up .8s .92s both;}

.ok-ey{
  color:#d97706;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:0;
}

.ok-rl{
  width:0;
  height:1px;
  background:#d97706;
  margin:13px 0;
  opacity:0;
}

.ok-h{
  color:#fff;
  font-size:clamp(26px,3.6vw,50px);
  font-weight:300;
  line-height:1.22;
  letter-spacing:-.01em;
  opacity:0;
}

.ok-h em{
  color:#d97706;
  font-style:normal;
}

.ok-p{
  color:rgba(255,255,255,.72);
  font-family:Arial,sans-serif;
  font-size:13.5px;
  line-height:1.78;
  max-width:460px;
  margin-top:16px;
  opacity:0;
}

.ok-bt{
  display:flex;
  gap:13px;
  margin-top:30px;
  flex-wrap:wrap;
  opacity:0;
}

/* =========================
   BUTTONS
========================= */

.ok-btn-g{
  background:#d97706;
  color:#071a10;
  border:none;
  padding:12px 28px;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s;
}

.ok-btn-g:hover{
  background:#b45309;
  transform:translateY(-2px);
}

.ok-btn-w{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
  padding:12px 28px;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s;
}

.ok-btn-w:hover{
  border-color:#fff;
  background:rgba(255,255,255,.07);
}

/* =========================
   ARROWS
========================= */

.ok-arr{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:30;

  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);

  color:#fff;

  width:42px;
  height:42px;

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

  cursor:pointer;

  transition:.25s;
  font-size:14px;
}

.ok-arr:hover{
  background:rgba(217,119,6,.22);
  border-color:#d97706;
  color:#d97706;
}

.ok-arr.prev{left:14px;}
.ok-arr.nxt{right:14px;}

/* =========================
   DOTS
========================= */

.ok-dots{
  position:absolute;
  bottom:28px;
  left:52px;
  display:flex;
  gap:7px;
  z-index:30;
}

.ok-dot{
  height:2px;
  width:26px;
  background:rgba(255,255,255,.22);
  cursor:pointer;
  border:none;
  padding:0;
  transition:.3s;
}

.ok-dot.on{
  background:#d97706;
  width:46px;
}

/* =========================
   PROGRESS BAR
========================= */

.ok-prog{
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  background:#d97706;
  z-index:40;
  width:0;
}

.ok-prog.run{
  animation:ok-prg 8s linear forwards;
}

/* =========================
   MOBILE
========================= */

/* CINEMATIC SCROLL REVEAL */
.reveal{
  opacity:0;
  transform:translateY(46px) scale(.97);
  filter:blur(2px);
  transition:opacity 1s cubic-bezier(.16,.84,.44,1),
             transform 1s cubic-bezier(.16,.84,.44,1),
             filter 1s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform, filter;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* CINEMATIC IMAGE TREATMENT */
.cinematic-frame{
  position:relative;
  overflow:hidden;
  border-radius:0;
}
.cinematic-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.16,.84,.44,1), filter .6s ease;
  cursor:zoom-in;
}
.cinematic-frame:hover img{
  transform:scale(1.09);
  filter:brightness(1.03);
}
.cinematic-frame::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,35,25,0) 55%, rgba(10,35,25,.55) 100%);
  pointer-events:none;
}
.cinematic-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:18px 22px;
  color:#fff;
  z-index:2;
  font-family:'Playfair Display', serif;
}

/* LIGHTBOX */
.ok-lightbox{
  position:fixed;
  inset:0;
  background:rgba(7,26,16,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.ok-lightbox.open{
  opacity:1;
  pointer-events:auto;
}
.ok-lightbox img{
  max-width:88vw;
  max-height:86vh;
  border-radius:0;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.94);
  transition:transform .35s ease;
}
.ok-lightbox.open img{ transform:scale(1); }
.ok-lightbox-close{
  position:absolute;
  top:26px; right:34px;
  color:#fff;
  font-size:34px;
  cursor:pointer;
  line-height:1;
  opacity:.75;
}
.ok-lightbox-close:hover{ opacity:1; color:#d97706; }

/* FLOATING CONSULTATION CTA */
.floating-cta{
  position:fixed;
  bottom:26px;
  right:26px;
  z-index:900;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#0A2319;
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  box-shadow:0 15px 35px rgba(217,119,6,.4);
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  border:none;
  opacity:0;
  transform:translateY(24px) scale(.9);
  pointer-events:none;
  transition:all .4s cubic-bezier(.16,.84,.44,1);
}
.floating-cta.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.floating-cta:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 20px 45px rgba(217,119,6,.55);
}

/* INFO / FACILITY CARDS */
.info-card{
  background:#fff;
  border-radius:24px;
  padding:2.5rem;
  box-shadow:0 20px 40px rgba(0,0,0,0.06);
  border-bottom:4px solid transparent;
  transition:all .4s cubic-bezier(.16,.84,.44,1);
  height:100%;
}
.info-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 55px rgba(0,0,0,.12);
  border-bottom-color:#d97706;
}
.info-card i.info-icon{
  font-size:2.2rem;
  color:#d97706;
  margin-bottom:1.1rem;
  display:inline-block;
}

/* =========================
   CINEMATIC PAGE-TRANSITION CURTAIN
========================= */
.page-curtain{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
}
.page-curtain-panel{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  background:linear-gradient(160deg, #0A2319, #06140d);
  transform:scaleX(0);
  transition:transform .62s cubic-bezier(.76,0,.24,1);
}
.page-curtain-panel.left{ left:0; transform-origin:left; }
.page-curtain-panel.right{ right:0; transform-origin:right; }

.page-curtain-mark{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.85);
  opacity:0;
  transition:opacity .3s ease .25s, transform .4s ease .25s;
  z-index:2;
}
.page-curtain-mark img{
  height:56px;
  filter:drop-shadow(0 0 10px rgba(217,119,6,.5));
}

.page-curtain.closing .page-curtain-panel,
.page-curtain.opening .page-curtain-panel{
  transform:scaleX(1);
}
.page-curtain.opening .page-curtain-panel.left{ transform-origin:left; transform:scaleX(0); }
.page-curtain.opening .page-curtain-panel.right{ transform-origin:right; transform:scaleX(0); }
.page-curtain.closing .page-curtain-mark{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* =========================
   CARD COVER IMAGES (practice areas / services)
========================= */
.card-cover{
  position:relative;
  width:100%;
  height:160px;
  overflow:hidden;
  border-radius:0;
  margin-bottom:14px;
}
.card-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.card-cover-tint{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,35,25,.05), rgba(10,35,25,.35));
  transition:background .4s ease;
}
.group:hover .card-cover img,
.reveal:hover .card-cover img{
  transform:scale(1.12) rotate(.3deg);
}

/* =========================
   VALUE CARD THUMBNAILS
========================= */
.value-thumb{
  width:64px;
  height:64px;
  border-radius:0;
  overflow:hidden;
  margin:0 auto 14px;
  border:3px solid #fbbf24;
  box-shadow:0 8px 18px rgba(217,119,6,.25);
}
.value-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.value-card:hover .value-thumb img{
  transform:scale(1.15);
}

/* =========================
   TESTIMONIAL AVATARS
========================= */
.avatar-ring{
  width:52px;
  height:52px;
  border-radius:0;
  overflow:hidden;
  display:inline-block;
  margin-bottom:12px;
  border:2px solid #d97706;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.avatar-ring img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   HERO STATS STRIP (extends hero background)
========================= */
.hero-stats-strip{
  position:relative;
  margin-top:-1px;
  padding-top:2.75rem;
  padding-bottom:2.75rem;
  background-image:
    linear-gradient(180deg, rgba(7,26,16,.90) 0%, rgba(7,26,16,.94) 100%),
    url('images/Okwiriadvocates.png');
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:900px){
  .hero-stats-strip{ background-attachment:scroll; }
}

.stat-card-glass{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(251,191,36,.18);
  border-left:4px solid #fbbf24;
  border-radius:6px;
  padding:1.15rem .9rem;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:all .35s ease;
}
.stat-card-glass:hover{
  background:rgba(255,255,255,.09);
  transform:translateY(-4px);
}
.stat-card-glass i{
  color:#fbbf24;
  font-size:1.6rem;
  margin-bottom:.55rem;
}
.stat-card-glass .stat-number{
  color:#ffffff;
  font-size:1.5rem;
}
.stat-card-glass .stat-label{
  color:rgba(255,255,255,.72);
  font-size:.75rem;
}

/* =========================
   ABOUT PAGE — LAW-THEMED BACKDROP
========================= */
#about-page.active-page{
  background-image:
    linear-gradient(180deg, rgba(8,26,17,.65) 0%, rgba(8,26,17,.8) 100%),
    url('https://images.pexels.com/photos/5669619/pexels-photo-5669619.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:900px){
  #about-page.active-page{ background-attachment:scroll; }
}

/* =========================
   FULL-PAGE PARTNER PROFILE (lead partners) — editorial split layout
========================= */
.lawyer-fullpage{
  position:relative;
  min-height:20vh !important;
  display:flex;
  align-items:stretch;
  zoom: 0.8;
}

.lawyer-label{
  margin-top: 40px;
  margin-bottom: 40px;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 30px;
  color:#d97706;
  border-bottom:2px solid #fbbf24;
  text-transform: uppercase;
  
}
.lawyer-fullpage.reverse{
  flex-direction:row-reverse;
}
.lawyer-fullpage-media{
  flex:0 0 28% !important;
  max-width:28% !important;
  position:relative;
  overflow:hidden;
  background:#0A2319;
}
.lawyer-fullpage-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lawyer-fullpage-media-mark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, #ffffff, #ffffff) !important;
}
.lawyer-fullpage-media-mark img{
  width:auto;
  height:34%;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(217,119,6,.35));
}
.lawyer-fullpage-media::after{
  content:'';
  position:absolute;
  inset:0;
  border-right:1px solid rgba(217,119,6,.35);
  pointer-events:none;
}
.lawyer-fullpage.reverse .lawyer-fullpage-media::after{
  border-right:none;
  border-left:1px solid rgba(217,119,6,.35);
}
.lawyer-fullpage-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6vw 6vw;
  background:#fafaf8;
}
.lawyer-fullpage-index{
  display:inline-block;
  font-family:'Playfair Display', serif;
  font-size:13px;
  letter-spacing:.22em;
  color:#d97706;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:20px;
}
.lawyer-fullpage-name{
  font-family:'Playfair Display', serif;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.15;
  color:#0A2319;
  margin-bottom:10px;
}
.lawyer-fullpage-title{
  display:inline-block;
  color:#d97706;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12.5px;
  font-weight:700;
  margin-bottom:28px;
  padding-bottom:14px;
  border-bottom:2px solid #fbbf24;
  
}
.lawyer-fullpage-bio p{
  color:#4b5563;
  line-height:1.85;
  font-size:17.5px !important;
  margin-bottom:16px;
  max-width:1000px !important;
}
.lawyer-fullpage-social{
  display:flex;
  gap:14px;
  margin-top:26px;
}
.lawyer-fullpage-social a{
  width:38px;
  height:38px;
  background:rgba(10,35,25,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s ease;
}
.lawyer-fullpage-social a:hover{
  background:#d97706;
}
.lawyer-fullpage-social a i{
  color:#0A2319;
  font-size:14px;
  transition:color .3s ease;
}
.lawyer-fullpage-social a:hover i{
  color:#fff;
}
@media(max-width:900px){
  .lawyer-fullpage, .lawyer-fullpage.reverse{
    flex-direction:column;
    min-height:auto;
  }
  .lawyer-fullpage-media{
    flex:0 0 auto;
    max-width:100%;
    height:50vh;
  }
  .lawyer-fullpage-panel{
    padding:56px 7vw;
  }
}

/* =========================
   STORYTELLING LAWYER PROFILES
========================= */
.lawyer-story{
  display:flex;
  align-items:stretch;
  gap:64px;
  padding:70px 0;
  zoom: 0.7;
}
.lawyer-story + .lawyer-story{
  border-top:1px solid rgba(10,35,25,.08);
}
.lawyer-story.reverse{
  flex-direction:row-reverse;
}
.lawyer-story-media{
  flex:0 0 42%;
  max-width:42%;
  position:relative;
}
.lawyer-story-frame{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:0;
  position:relative;
  background:#0A2319;
}
.lawyer-story-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.16,.84,.44,1);
  cursor:zoom-in;
}
.lawyer-story-frame:hover img{
  transform:scale(1.06);
}
.lawyer-story-frame::before{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(217,119,6,.5);
  outline:10px solid transparent;
  outline-offset:-10px;
  pointer-events:none;
  z-index:2;
}
.lawyer-story-index{
  position:absolute;
  top:18px;
  left:18px;
  z-index:3;
  color:#fff;
  font-family:'Playfair Display', serif;
  font-size:15px;
  letter-spacing:.15em;
  background:rgba(10,35,25,.55);
  padding:6px 12px;
}
.lawyer-story-content{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.lawyer-story-name{
  font-family:'Playfair Display', serif;
  font-size:clamp(26px, 3vw, 38px);
  color:#0A2319;
  line-height:1.15;
  margin-bottom:8px;
}
.lawyer-story-title{
  display:inline-block;
  color:#d97706;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12.5px;
  font-weight:700;
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:2px solid #fbbf24;
}
.lawyer-story-bio p{
  color:#4b5563;
  line-height:1.8;
  font-size:15.5px;
  margin-bottom:16px;
  font-style:italic;
}
.lawyer-story-social{
  display:flex;
  gap:14px;
  margin-top:26px;
}
.lawyer-story-social a{
  width:38px;
  height:38px;
  background:rgba(10,35,25,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s ease;
  border-radius:0;
}
.lawyer-story-social a:hover{
  background:#d97706;
}
.lawyer-story-social a i{
  color:#0A2319;
  font-size:14px;
  transition:color .3s ease;
}
.lawyer-story-social a:hover i{
  color:#fff;
}

@media(max-width:900px){
  .lawyer-story, .lawyer-story.reverse{
    flex-direction:column;
    gap:28px;
    padding:44px 0;
  }
  .lawyer-story-media{
    flex:0 0 auto;
    max-width:100%;
  }
  .lawyer-story-frame{
    aspect-ratio:4/3;
  }
}

/* =========================
   MOMENTS GALLERY MOSAIC
========================= */
.gallery-mosaic{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:14px;
}
.gallery-item{
  border-radius:0;
}
.gallery-item.g-tall{
  grid-row:span 2;
}
@media(max-width:768px){
  .gallery-mosaic{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:150px;
  }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; filter:none; }
  .page-curtain-panel, .page-curtain-mark{ transition:none !important; }
}

@media(max-width:768px){

  .ok-content{
    padding:0 22px;
    max-width:100%;
  }

  .ok-badge{
    left:22px;
    top:18px;
  }

  .ok-ctr{
    right:22px;
  }

  .ok-dots{
    left:22px;
  }

  .ok-arr{
    display:none;
  }

  .ok-h{
    font-size:36px;
  }

  .ok-p{
    font-size:13px;
  }

  /* Portraits fit better on mobile */
  .ok-slide:nth-child(2) .ok-bg,
  .ok-slide:nth-child(3) .ok-bg{
    background-size:cover;
    background-position:center top;
  }
}@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
        
        * { margin: 0; padding: 0; box-sizing: border-box; }

        html {
        height: 100%;
            
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: #ffffff;
            font-size: 14px;
            zoom: 80%
        }
        
        .heading-font {
            font-family: 'Playfair Display', serif;
        }
        
        /* Page Navigation Styles - True Multi-Page */
        .page {
            display: none;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }
        
        .page.active-page {
            display: block;
            opacity: 1;
            animation: pageFadeIn 0.5s ease forwards;
        }
        
        @keyframes pageFadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Card hover effects */
        .expertise-card, .compliance-card {
            background: white;
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        
        .expertise-card:hover, .compliance-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 50px rgba(0,0,0,0.15);
        }
        
        .compliance-header {
            background: linear-gradient(135deg, #0A2319, #14532d);
            color: white;
            padding: 1.75rem;
            text-align: center;
            border-radius: 24px 24px 0 0;
        }
        
        .nav-link {
            transition: all 0.2s ease;
            position: relative;
        }
        
        .nav-link.active-nav {
            color: #fbbf24;
        }
        
        .nav-link.active-nav::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 2px;
            background: #fbbf24;
            border-radius: 2px;
        }
        
        /* Mobile menu */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0A2319;
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }
        
        .mobile-menu.open {
            transform: translateX(0);
        }
        
        .map-frame {
            width: 100%;
            height: 380px;
            border: none;
            border-radius: 16px;
        }
        
        .logo {
            height: 70px;
            object-fit: contain;
            filter: drop-shadow(0 0 6px rgba(245, 176, 65, 0.4));
        }
        
        /* Button styles */
        .btn-primary {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.4);
        }
        
        /* Stat counter animation placeholder */
        .stat-number {
            font-weight: 800;
        }

        .faq-question { cursor: pointer; }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            padding-top: 0;
            padding-bottom: 0;
            transition: max-height .45s cubic-bezier(.16,.84,.44,1), padding .3s ease;
        }
        .faq-answer.faq-open {
            padding-top: 0.25rem;
            padding-bottom: 1.25rem;
        }

            /* Smooth transitions for cards */
    .expertise-card {
        transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }
    
    /* Subtle shadow enhancement on hover */
    .group:hover .shadow-lg {
        box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.15);
    }
    
    /* Gold gradient text option for headings (if desired) */
    .gold-gradient-text {
        background: linear-gradient(135deg, #b8860b, #d4af37);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }


      /* ── CLIENTS ── */
  .clients {
    padding: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    background: var(--ink2);
  }

  .clients::before, .clients::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 200px;
    z-index: 2;
  }

  .clients::before { left: 0; background: linear-gradient(90deg, var(--ink2), transparent); }
  .clients::after { right: 0; background: linear-gradient(-90deg, var(--ink2), transparent); }

  .ticker-label {
    text-align: center;
    padding: 20px;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 4px;
    color: var(--muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
  }

.ticker {
  overflow: hidden;
  width: 100%;
  position: relative;

  cursor: pointer;
  transition: all 0.3s ease;
}

.effect{
    cursor: pointer;
    transition: all 0.5s ease;
}

.effect:hover {
  background: #f0ce93; /* amber-500 */
  box-shadow: 0 0 20px rgba(236, 179, 81, 0.7);
}

  .ticker-track {
    display: flex;
    gap: 80px;
    animation: ticker 35s linear infinite;
    width: max-content;
    padding: 24px 0;
    align-items: center;
  }

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

@keyframes heroMove {
    0% {
        background-size: 110%;
        background-position: 50% 40%;
    }
    50% {
        background-size: 115%;
        background-position: 55% 45%;
    }
    100% {
        background-size: 120%;
        background-position: 60% 50%;
    }
}

  .client-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s;
  }

  .client-logo:hover { color: var(--gold); }

  .cl-sep { width: 4px; height: 4px; background: var(--gold); opacity: 0.3; transform: rotate(45deg); }

  
 
/* =========================
   ANIMATIONS
========================= */

/* Smooth cinematic movement */
@keyframes kb1{
  0%   {transform:scale(1.08) translate3d(0,0,0);}
  100% {transform:scale(1.18) translate3d(-2%,-1%,0);}
}

@keyframes kb2{
  0%   {transform:scale(1.06) translate3d(0,0,0);}
  100% {transform:scale(1.16) translate3d(-1.5%,-2%,0);}
}

@keyframes kb3{
  0%   {transform:scale(1.07) translate3d(-1%,0,0);}
  100% {transform:scale(1.17) translate3d(1.5%,-1%,0);}
}

@keyframes kb4{
  0%   {transform:scale(1.03) translate3d(1%,1%,0);}
  100% {transform:scale(1.10) translate3d(-1%,-1%,0);}
}

@keyframes kb5{
  0%   {transform:scale(1.04) translate3d(0,-1%,0);}
  100% {transform:scale(1.11) translate3d(1%,1%,0);}
}

@keyframes ok-up{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes ok-bar{
  from{
    width:0;
    opacity:0;
  }
  to{
    width:44px;
    opacity:1;
  }
}

@keyframes ok-prg{
  from{width:0%;}
  to{width:100%;}
}

/* =========================
   HERO SECTION
========================= */

.ok-hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:580px;
  max-height:920px;
  overflow:hidden;
  background:#071a10;
  font-family:'Georgia','Times New Roman',serif;
}

/* =========================
   SLIDES
========================= */

.ok-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.4s ease;
  pointer-events:none;
}

.ok-slide.on{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   BACKGROUND IMAGE
========================= */

.ok-bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  background-repeat:no-repeat;

  /* IMPORTANT */
  background-size:cover;

  /* keeps image elegant */
 background-position:center center;

  background-color:#071a10;

  will-change:transform;
  transition:transform 8s ease;
}



/* Cinematic movement */
.ok-slide.on .ok-bg{
  animation-duration:10s;
  animation-timing-function:ease-in-out;
  animation-fill-mode:both;
}

.ok-slide:nth-child(1).on .ok-bg{animation-name:kb1;}
.ok-slide:nth-child(2).on .ok-bg{animation-name:kb2;}
.ok-slide:nth-child(3).on .ok-bg{animation-name:kb3;}
.ok-slide:nth-child(4).on .ok-bg{animation-name:kb4;}
.ok-slide:nth-child(5).on .ok-bg{animation-name:kb5;}

/* =========================
   IMAGE PATHS
========================= */

.ok-slide:nth-child(1) .ok-bg{
  background-image:url('images/Okwiriadvocates.png');
}

.ok-slide:nth-child(2) .ok-bg{
  background-image:url('images/Bianca.jpg');
  background-position:right center;
  
}

.ok-slide:nth-child(3) .ok-bg{
  background-image:url('images/wakiopic3.jpeg');
  background-position:center top;
}

.ok-slide:nth-child(4) .ok-bg{
  background-image:url('images/Services.png');
}

.ok-slide:nth-child(5) .ok-bg{
  background-image:url('images/Find_us.png');
}

/* =========================
   OVERLAYS
========================= */

.ok-ov1{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    to right,
    rgba(7,26,16,.95) 0%,
    rgba(7,26,16,.78) 35%,
    rgba(7,26,16,.25) 100%
  );
}

.ok-ov2{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    to top,
    rgba(7,26,16,.92) 0%,
    transparent 55%
  );
}

/* =========================
   FIRM BADGE
========================= */

.ok-badge{
  position:absolute;
  top:30px;
  left:52px;
  display:flex;
  align-items:center;
  gap:11px;
  z-index:30;
}

.ok-badge-bar{
  width:3px;
  height:38px;
  background:#d97706;
}

.ok-badge-name{
  color:#fff;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.3;
}

.ok-badge-sub{
  color:#d97706;
  font-family:Arial,sans-serif;
  font-size:9px;
  letter-spacing:.25em;
  text-transform:uppercase;
  display:block;
  margin-top:3px;
}

/* =========================
   COUNTER
========================= */

.ok-ctr{
  position:absolute;
  top:36px;
  right:52px;
  color:rgba(255,255,255,.35);
  font-family:Arial,sans-serif;
  font-size:11px;
  letter-spacing:.2em;
  z-index:30;
}

.ok-ctr b{
  color:rgba(255,255,255,.82);
  font-weight:400;
}

/* =========================
   CONTENT
========================= */

.ok-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 52px;
  z-index:20;
  max-width:680px;
}

.ok-slide.on .ok-ey {animation:ok-up .7s .25s both;}
.ok-slide.on .ok-rl {animation:ok-bar .6s .42s both;}
.ok-slide.on .ok-h  {animation:ok-up .8s .52s both;}
.ok-slide.on .ok-p  {animation:ok-up .8s .72s both;}
.ok-slide.on .ok-bt {animation:ok-up .8s .92s both;}

.ok-ey{
  color:#d97706;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:0;
}

.ok-rl{
  width:0;
  height:1px;
  background:#d97706;
  margin:13px 0;
  opacity:0;
}

.ok-h{
  color:#fff;
  font-size:clamp(26px,3.6vw,50px);
  font-weight:300;
  line-height:1.22;
  letter-spacing:-.01em;
  opacity:0;
}

.ok-h em{
  color:#d97706;
  font-style:normal;
}

.ok-p{
  color:rgba(255,255,255,.72);
  font-family:Arial,sans-serif;
  font-size:13.5px;
  line-height:1.78;
  max-width:460px;
  margin-top:16px;
  opacity:0;
}

.ok-bt{
  display:flex;
  gap:13px;
  margin-top:30px;
  flex-wrap:wrap;
  opacity:0;
}

/* =========================
   BUTTONS
========================= */

.ok-btn-g{
  background:#d97706;
  color:#071a10;
  border:none;
  padding:12px 28px;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s;
}

.ok-btn-g:hover{
  background:#b45309;
  transform:translateY(-2px);
}

.ok-btn-w{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
  padding:12px 28px;
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s;
}

.ok-btn-w:hover{
  border-color:#fff;
  background:rgba(255,255,255,.07);
}

/* =========================
   ARROWS
========================= */

.ok-arr{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:30;

  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);

  color:#fff;

  width:42px;
  height:42px;

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

  cursor:pointer;

  transition:.25s;
  font-size:14px;
}

.ok-arr:hover{
  background:rgba(217,119,6,.22);
  border-color:#d97706;
  color:#d97706;
}

.ok-arr.prev{left:14px;}
.ok-arr.nxt{right:14px;}

/* =========================
   DOTS
========================= */

.ok-dots{
  position:absolute;
  bottom:28px;
  left:52px;
  display:flex;
  gap:7px;
  z-index:30;
}

.ok-dot{
  height:2px;
  width:26px;
  background:rgba(255,255,255,.22);
  cursor:pointer;
  border:none;
  padding:0;
  transition:.3s;
}

.ok-dot.on{
  background:#d97706;
  width:46px;
}

/* =========================
   PROGRESS BAR
========================= */

.ok-prog{
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  background:#d97706;
  z-index:40;
  width:0;
}

.ok-prog.run{
  animation:ok-prg 8s linear forwards;
}

/* =========================
   MOBILE
========================= */

/* CINEMATIC SCROLL REVEAL */
.reveal{
  opacity:0;
  transform:translateY(46px) scale(.97);
  filter:blur(2px);
  transition:opacity 1s cubic-bezier(.16,.84,.44,1),
             transform 1s cubic-bezier(.16,.84,.44,1),
             filter 1s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform, filter;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* CINEMATIC IMAGE TREATMENT */
.cinematic-frame{
  position:relative;
  overflow:hidden;
  border-radius:0;
}
.cinematic-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.16,.84,.44,1), filter .6s ease;
  cursor:zoom-in;
}
.cinematic-frame:hover img{
  transform:scale(1.09);
  filter:brightness(1.03);
}
.cinematic-frame::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,35,25,0) 55%, rgba(10,35,25,.55) 100%);
  pointer-events:none;
}
.cinematic-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:18px 22px;
  color:#fff;
  z-index:2;
  font-family:'Playfair Display', serif;
}

/* LIGHTBOX */
.ok-lightbox{
  position:fixed;
  inset:0;
  background:rgba(7,26,16,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.ok-lightbox.open{
  opacity:1;
  pointer-events:auto;
}
.ok-lightbox img{
  max-width:88vw;
  max-height:86vh;
  border-radius:0;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.94);
  transition:transform .35s ease;
}
.ok-lightbox.open img{ transform:scale(1); }
.ok-lightbox-close{
  position:absolute;
  top:26px; right:34px;
  color:#fff;
  font-size:34px;
  cursor:pointer;
  line-height:1;
  opacity:.75;
}
.ok-lightbox-close:hover{ opacity:1; color:#d97706; }

/* FLOATING CONSULTATION CTA */
.floating-cta{
  position:fixed;
  bottom:26px;
  right:26px;
  z-index:900;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#0A2319;
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  box-shadow:0 15px 35px rgba(217,119,6,.4);
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  border:none;
  opacity:0;
  transform:translateY(24px) scale(.9);
  pointer-events:none;
  transition:all .4s cubic-bezier(.16,.84,.44,1);
}
.floating-cta.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.floating-cta:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 20px 45px rgba(217,119,6,.55);
}

/* INFO / FACILITY CARDS */
.info-card{
  background:#fff;
  border-radius:24px;
  padding:2.5rem;
  box-shadow:0 20px 40px rgba(0,0,0,0.06);
  border-bottom:4px solid transparent;
  transition:all .4s cubic-bezier(.16,.84,.44,1);
  height:100%;
}
.info-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 55px rgba(0,0,0,.12);
  border-bottom-color:#d97706;
}
.info-card i.info-icon{
  font-size:2.2rem;
  color:#d97706;
  margin-bottom:1.1rem;
  display:inline-block;
}

/* =========================
   CINEMATIC PAGE-TRANSITION CURTAIN
========================= */
.page-curtain{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
}
.page-curtain-panel{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  background:linear-gradient(160deg, #0A2319, #06140d);
  transform:scaleX(0);
  transition:transform .62s cubic-bezier(.76,0,.24,1);
}
.page-curtain-panel.left{ left:0; transform-origin:left; }
.page-curtain-panel.right{ right:0; transform-origin:right; }

.page-curtain-mark{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.85);
  opacity:0;
  transition:opacity .3s ease .25s, transform .4s ease .25s;
  z-index:2;
}
.page-curtain-mark img{
  height:56px;
  filter:drop-shadow(0 0 10px rgba(217,119,6,.5));
}

.page-curtain.closing .page-curtain-panel,
.page-curtain.opening .page-curtain-panel{
  transform:scaleX(1);
}
.page-curtain.opening .page-curtain-panel.left{ transform-origin:left; transform:scaleX(0); }
.page-curtain.opening .page-curtain-panel.right{ transform-origin:right; transform:scaleX(0); }
.page-curtain.closing .page-curtain-mark{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* =========================
   CARD COVER IMAGES (practice areas / services)
========================= */
.card-cover{
  position:relative;
  width:100%;
  height:160px;
  overflow:hidden;
  border-radius:0;
  margin-bottom:14px;
}
.card-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.card-cover-tint{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,35,25,.05), rgba(10,35,25,.35));
  transition:background .4s ease;
}
.group:hover .card-cover img,
.reveal:hover .card-cover img{
  transform:scale(1.12) rotate(.3deg);
}

/* =========================
   VALUE CARD THUMBNAILS
========================= */
.value-thumb{
  width:64px;
  height:64px;
  border-radius:0;
  overflow:hidden;
  margin:0 auto 14px;
  border:3px solid #fbbf24;
  box-shadow:0 8px 18px rgba(217,119,6,.25);
}
.value-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.value-card:hover .value-thumb img{
  transform:scale(1.15);
}

/* =========================
   TESTIMONIAL AVATARS
========================= */
.avatar-ring{
  width:52px;
  height:52px;
  border-radius:0;
  overflow:hidden;
  display:inline-block;
  margin-bottom:12px;
  border:2px solid #d97706;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.avatar-ring img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   HERO STATS STRIP (extends hero background)
========================= */
.hero-stats-strip{
  position:relative;
  margin-top:-1px;
  padding-top:2.75rem;
  padding-bottom:2.75rem;
  background-image:
    linear-gradient(180deg, rgba(7,26,16,.90) 0%, rgba(7,26,16,.94) 100%),
    url('images/Okwiriadvocates.png');
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:900px){
  .hero-stats-strip{ background-attachment:scroll; }
}

.stat-card-glass{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(251,191,36,.18);
  border-left:4px solid #fbbf24;
  border-radius:6px;
  padding:1.15rem .9rem;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:all .35s ease;
}
.stat-card-glass:hover{
  background:rgba(255,255,255,.09);
  transform:translateY(-4px);
}
.stat-card-glass i{
  color:#fbbf24;
  font-size:1.6rem;
  margin-bottom:.55rem;
}
.stat-card-glass .stat-number{
  color:#ffffff;
  font-size:1.5rem;
}
.stat-card-glass .stat-label{
  color:rgba(255,255,255,.72);
  font-size:.75rem;
}

/* =========================
   ABOUT PAGE — LAW-THEMED BACKDROP
========================= */
#about-page.active-page{
  background-image:
    linear-gradient(180deg, rgba(8,26,17,.65) 0%, rgba(8,26,17,.8) 100%),
    url('https://images.pexels.com/photos/5669619/pexels-photo-5669619.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:900px){
  #about-page.active-page{ background-attachment:scroll; }
}

/* =========================
   FULL-PAGE PARTNER PROFILE (lead partners) — editorial split layout
========================= */
.lawyer-fullpage{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:stretch;
}
.lawyer-fullpage.reverse{
  flex-direction:row-reverse;
}
.lawyer-fullpage-media{
  flex:0 0 48%;
  max-width:48%;
  position:relative;
  overflow:hidden;
  background:#0A2319;
}
.lawyer-fullpage-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lawyer-fullpage-media-mark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, #0A2319, #071a10);
}
.lawyer-fullpage-media-mark img{
  width:auto;
  height:34%;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(217,119,6,.35));
}
.lawyer-fullpage-media::after{
  content:'';
  position:absolute;
  inset:0;
  border-right:1px solid rgba(217,119,6,.35);
  pointer-events:none;
}
.lawyer-fullpage.reverse .lawyer-fullpage-media::after{
  border-right:none;
  border-left:1px solid rgba(217,119,6,.35);
}
.lawyer-fullpage-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6vw 6vw;
  background:#fafaf8;
}
.lawyer-fullpage-index{
  display:inline-block;
  font-family:'Playfair Display', serif;
  font-size:13px;
  letter-spacing:.22em;
  color:#d97706;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:20px;
}
.lawyer-fullpage-name{
  font-family:'Playfair Display', serif;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.15;
  color:#0A2319;
  margin-bottom:10px;
}
.lawyer-fullpage-title{
  display:inline-block;
  color:#d97706;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12.5px;
  font-weight:700;
  margin-bottom:28px;
  padding-bottom:14px;
  border-bottom:2px solid #fbbf24;
}
.lawyer-fullpage-bio p{
  color:#4b5563;
  line-height:1.85;
  font-size:15.5px;
  margin-bottom:16px;
  max-width:520px;
}
.lawyer-fullpage-social{
  display:flex;
  gap:14px;
  margin-top:26px;
}
.lawyer-fullpage-social a{
  width:38px;
  height:38px;
  background:rgba(10,35,25,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s ease;
}
.lawyer-fullpage-social a:hover{
  background:#d97706;
}
.lawyer-fullpage-social a i{
  color:#0A2319;
  font-size:14px;
  transition:color .3s ease;
}
.lawyer-fullpage-social a:hover i{
  color:#fff;
}
@media(max-width:900px){
  .lawyer-fullpage, .lawyer-fullpage.reverse{
    flex-direction:column;
    min-height:auto;
  }
  .lawyer-fullpage-media{
    flex:0 0 auto;
    max-width:100%;
    height:60vh;
  }
  .lawyer-fullpage-panel{
    padding:56px 7vw;
  }
}

/* =========================
   STORYTELLING LAWYER PROFILES
========================= */
.lawyer-story{
  display:flex;
  align-items:stretch;
  gap:64px;
  padding:70px 0;
}
.lawyer-story + .lawyer-story{
  border-top:1px solid rgba(10,35,25,.08);
}
.lawyer-story.reverse{
  flex-direction:row-reverse;
}
.lawyer-story-media{
  flex:0 0 42%;
  max-width:42%;
  position:relative;
}
.lawyer-story-frame{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:0;
  position:relative;
  background:#0A2319;
}
.lawyer-story-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.16,.84,.44,1);
  cursor:zoom-in;
}
.lawyer-story-frame:hover img{
  transform:scale(1.06);
}
.lawyer-story-frame::before{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(217,119,6,.5);
  outline:10px solid transparent;
  outline-offset:-10px;
  pointer-events:none;
  z-index:2;
}
.lawyer-story-index{
  position:absolute;
  top:18px;
  left:18px;
  z-index:3;
  color:#fff;
  font-family:'Playfair Display', serif;
  font-size:15px;
  letter-spacing:.15em;
  background:rgba(10,35,25,.55);
  padding:6px 12px;
}
.lawyer-story-content{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.lawyer-story-name{
  font-family:'Playfair Display', serif;
  font-size:clamp(26px, 3vw, 38px);
  color:#0A2319;
  line-height:1.15;
  margin-bottom:8px;
}
.lawyer-story-title{
  display:inline-block;
  color:#d97706;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12.5px;
  font-weight:700;
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:2px solid #fbbf24;
}
.lawyer-story-bio p{
  color:#4b5563;
  line-height:1.8;
  font-size:15.5px;
  margin-bottom:16px;
  font-style:italic;
}
.lawyer-story-social{
  display:flex;
  gap:14px;
  margin-top:26px;
}
.lawyer-story-social a{
  width:38px;
  height:38px;
  background:rgba(10,35,25,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s ease;
  border-radius:0;
}
.lawyer-story-social a:hover{
  background:#d97706;
}
.lawyer-story-social a i{
  color:#0A2319;
  font-size:14px;
  transition:color .3s ease;
}
.lawyer-story-social a:hover i{
  color:#fff;
}

@media(max-width:900px){
  .lawyer-story, .lawyer-story.reverse{
    flex-direction:column;
    gap:28px;
    padding:44px 0;
  }
  .lawyer-story-media{
    flex:0 0 auto;
    max-width:100%;
  }
  .lawyer-story-frame{
    aspect-ratio:4/3;
  }
}

/* =========================
   MOMENTS GALLERY MOSAIC
========================= */
.gallery-mosaic{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:14px;
}
.gallery-item{
  border-radius:0;
}
.gallery-item.g-tall{
  grid-row:span 2;
}
@media(max-width:768px){
  .gallery-mosaic{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:150px;
  }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; filter:none; }
  .page-curtain-panel, .page-curtain-mark{ transition:none !important; }
}

@media(max-width:768px){

  .ok-content{
    padding:0 22px;
    max-width:100%;
  }

  .ok-badge{
    left:22px;
    top:18px;
  }

  .ok-ctr{
    right:22px;
  }

  .ok-dots{
    left:22px;
  }

  .ok-arr{
    display:none;
  }

  .ok-h{
    font-size:36px;
  }

  .ok-p{
    font-size:13px;
  }

  /* Portraits fit better on mobile */
  .ok-slide:nth-child(2) .ok-bg,
  .ok-slide:nth-child(3) .ok-bg{
    background-size:cover;
    background-position:center top;
  }
}

.why-header{
    text-align:center;
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;
    margin-bottom:70px;
}

.section-tag {
  display: inline-block;
  font-family: 'Times New Roman', Times, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.7px;
  color: gold;
  text-transform: uppercase;
  background: rgba(241, 239, 239, 0.08);
  border: 1px solid rgba(201,162,39,0.2);
  padding: 4px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
<<<<<<< HEAD
}
=======
}
>>>>>>> 723542f0a663bb6b9596bfea3a6b993f2e9f8df9