/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand-blue: #0b5b92;
  --brand-blue-dark: #094b79;
  --brand-blue-pale: #e8f2f9;
  --brand-blue-mid: #1a7bbf;
  --accent-gold: #c9a84c;
  --accent-gold-light: #f5edd8;
  --text-main: #333;
  --text-muted: #666;
  --text-light: #999;
  --bg-white: #ffffff;
  --bg-off: #f7f9fb;
  --bg-dark: #0d1f2d;
  --border: #e0e8ef;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 2px 12px rgba(11,91,146,.08);
  --shadow-md: 0 6px 32px rgba(11,91,146,.13);
  --shadow-lg: 0 16px 56px rgba(11,91,146,.18);
  --nav-h: 64px;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }
body {
  font-family: "Open Sans", "Poppins", sans-serif;
  color: #333;
  background: var(--bg-white);
  overflow-x: hidden;
  line-height: 1.7;
}

a { color: #0b5b92; text-decoration: none; }
a:hover { color: #094b79; text-decoration: none; }
h1,h2,h3,h4,h5,h6 { font-family: "Raleway","Poppins", sans-serif; line-height: 1.25; }
img { display: block; max-width: 100%; }
p { color: var(--text-main); }



/* ==================================================
   RTL Arabic Typography Overrides
   ================================================== */
html[dir="rtl"] body {
    font-family: "Tajawal", sans-serif;
}

/* Headings and interface elements */
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-eyebrow,
html[dir="rtl"] button,
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-ghost,
html[dir="rtl"] .case-meta strong {
    font-family: "Cairo", sans-serif;
}


/* Body reading text */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] h1,
html[dir="rtl"] h1 span,
html[dir="rtl"] .section-sub,
html[dir="rtl"] .case-meta span,
html[dir="rtl"] .case-note,
html[dir="rtl"] .case-highlight, 
html[dir="rtl"] span {
    font-family: "Tajawal", sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .section-title {
    font-weight: 700;
}

html[dir="rtl"] p,
html[dir="rtl"] li {
    font-weight: 400;
}

html[dir="rtl"] .case-highlight {
  border-left: none;
  border-right: 3px solid var(--accent-gold);
}

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

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-left { opacity:0; transform:translateX(-32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.visible { opacity:1; transform:none; }




/* ======= ── NAV ── =========== */
/*  1. MAIN NAVIGATION ===== */ 
#site-nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 999; 
    width: 100%; 
    height: var(--nav-h);
    background: rgba(255, 255, 255, 0.96); 
    -webkit-backdrop-filter: blur(12px); 
    backdrop-filter: blur(12px); 
    border-bottom: none; 
    transition: box-shadow var(--transition); 
 
 display: grid; 
 grid-template-columns: auto 1fr auto; 
 align-items: stretch;
 
    padding-inline: 1.75rem;
} 
/* Scrolled state preserved from previous navigation */ 
#site-nav.scrolled { 
    box-shadow: var(--shadow-md);
    } 

/* 2. NAVIGATION BRAND AREA ===== */ 
 #site-nav .nav-brand { 
    grid-column: 1;
    min-width: 0; 
    display: grid; 
    grid-template-columns: auto auto; 
    align-items: stretch; 
    justify-content: start; 
    column-gap: 0.85rem; 
}

    #site-nav.nav-home .nav-brand { 
        grid-template-columns: auto; 
    }

/* == 3. Nav LOGO ===== */
    #site-nav .logo { 
        display: flex; 
        align-items: center; 
        align-self: stretch; 
        background: #0b5b92; 
        padding-inline: 1.35rem; 
        min-width: 0; } 
    
    /* * Logo link */ 
    #site-nav .logo a { 
        display: block; 
        white-space: nowrap; 
        color: #fff; 
        text-decoration: none; 
    } 
    
    #site-nav .logo h1 { 
        margin: 0; 
        padding: 0; 
        font-size: clamp(1rem, 2vw + 0.6rem, 2rem); 
        line-height: 1; 
        font-weight: 700; 
        font-family: "Poppins", sans-serif; 
        white-space: nowrap;
        } 
        
    #site-nav .logo h1 a, 
    #site-nav .logo h1 a:hover, 
    #site-nav .logo h1 a:focus { 
        color: #fff; 
        text-decoration: none; 
        }

    #site-nav .logo small { 
        display: none; 
    }
    
    /* 4. NAVIGATION ACTION GROUP ==== */
    #site-nav .nav-actions { grid-column: 2 / 4; justify-self: end; align-self: center; display: flex; align-items: center; gap: 0; min-width: 0; }
    
    /* 5. DESKTOP NAV LINKS ==== */
    #site-nav .nav-actions #nav-links { 
        display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } #site-nav .nav-actions
    #nav-links li { margin: 0; padding: 0; } 
    #site-nav .nav-actions #nav-links a { 
        position: relative; 
        display: inline-flex; 
        align-items: center; 
        min-height: 40px; 
        padding: 0.5rem 0.75rem; 
        border-radius: var(--radius); 
        font-family: "Raleway", sans-serif; 
        font-size: 0.78rem; 
        font-weight: 600; 
        letter-spacing: 0.07em; 
        text-transform: uppercase; 
        color: var(--text-muted); 
        text-decoration: none; 
        transition: color var(--transition), 
        background var(--transition); }

    #site-nav .nav-actions #nav-links a:hover,
    #site-nav .nav-actions #nav-links a.active { 
        color: var(--brand-blue); 
        background: var(--brand-blue-pale); 
    }
    
    #site-nav .nav-actions #nav-links a::after { 
        content: ""; 
        position: absolute; 
        bottom: 2px; 
        left: 0.75rem; 
        right: 0.75rem; 
        height: 2px; 
        background: var(--brand-blue); 
        transform: scaleX(0); 
        transition: transform var(--transition); 
        border-radius: 2px; } 
        
    #site-nav .nav-actions #nav-links a.active::after { 
        transform: scaleX(1); 
    }

/* 6. LANGUAGE TOGGLE =====*/
#site-nav .nav-language { 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 38px; 
    height: 30px; 
    margin-inline-start: 0.35rem; 
    color: var(--text-muted); 
    text-decoration: none; 
    font-size: 1.05rem; 
    transition: color var(--transition), 
    transform var(--transition); 
    }

#site-nav .nav-language::before { 
    content: ""; 
    position: absolute; 
    inset-inline-start: -0.35rem; 
    top: 50%; 
    width: 1px; 
    height: 22px; 
    background: #d7d7d7; 
    transform: translateY(-50%); 
    } 
#site-nav .nav-language:hover { 
    color: var(--brand-blue); 
    transform: translateY(-1px);
    }

#site-nav .nav-language::after { display: none; }


 /* 7. CASE / WORK LINK==== */


 
    #site-nav .nav-work {
        display: flex;
        align-items: center; 
        align-self: stretch; 
        margin: 0;
        padding: 0; 
        text-decoration: none; 
        position: relative; 
        white-space: nowrap; 
        transition: transform 0.3s ease;
    } 






 #site-nav.nav-case .nav-work { 
     display: inline-flex; 
     align-items: center; 
     align-self: stretch; 
     gap: 0.35rem; 
     margin: 0; 
     padding: 0; 
     color: var(--accent-gold); 
     text-decoration: none; 
     white-space: nowrap; 
     transition: transform 0.3s ease, color 0.3s ease;
     }
 
 #site-nav.nav-case .nav-work span { 
     position: relative; 
     display: inline-block; 
     padding-inline-start: 4px; 
     color: var(--accent-gold); 
     font-family: "Raleway", sans-serif; 
     font-size: 1.3rem; 
     font-weight: 700; 
     font-style: italic; 
     line-height: 1; 
     white-space: nowrap;
     }
 
 
 #site-nav.nav-case .nav-work span::after { 
     display: none !important;
     }
 
 #site-nav.nav-case .nav-work i { 
     flex: 0 0 auto; 
     color: var(--brand-blue-dark); 
     font-size: 1rem; 
     line-height: 1; 
     transition: transform 0.3s ease, 
     color 0.3s ease;
     }
 
 #site-nav.nav-case .nav-work:hover { 
     transform: translateY(-2px) scale(1.035);
     }
 
 #site-nav.nav-case .nav-work:hover span { 
     color: var(--accent-gold);
     } 
 #site-nav.nav-case .nav-work:hover i { 
     color: var(--brand-blue-dark);
     }
 
 
 /* 8. HAMBURGER — DESKTOP BASE === */
 #site-nav .nav-hamburger { 
     display: none; 
     flex-direction: column; 
     align-items: center; 
     justify-content: center; 
     gap: 5px; 
     width: 34px; 
     height: 34px; 
     margin: 0; margin-inline-start: 0.45rem; 
     padding: 5px; 
     border: 0; 
     background: transparent; 
     cursor: pointer; } 
     
 #site-nav .nav-hamburger span { 
     display: block; 
     width: 22px; 
     height: 2px; 
     background: var(--brand-blue); 
     border-radius: 2px; 
     transition: var(--transition);
     }
 
 /* 9. MOBILE — 768PX ==== */
 
 @media (max-width: 768px) { #site-nav { /* * More compact side padding, but the controls themselves have * internal breathing room. */ padding-inline: 0.9rem; /* * Center / controls arrangement. */ grid-template-columns: 1fr auto 1fr; }
 
 /* ---------------------------------------------------------------------- MOBILE HOMEPAGE BRAND ---------------------------------------------------------------------- */ /* * Homepage: * * LOGO * * centered in the viewport. */ 
 #site-nav.nav-home .nav-brand { 
     grid-column: 2; 
     grid-row: 1; 
     display: grid; 
     grid-template-columns: auto; 
     justify-content: center; 
     align-items: center;
     } 
     
/* * The logo is now genuinely centered. */ 
    #site-nav.nav-home .logo { 
        justify-content: center; 
        padding-inline: 1rem; 
        background: #0b5b92;
        }

/* * Larger mobile logo. */ 
    #site-nav.nav-home .logo h1 { 
        font-size: clamp(1.25rem, 5vw, 1.7rem); 
        text-align: center;
        } 
 
 /* MOBILE CASE BRAND ---- */
 /* * Cases: * * CASES LOGO LANGUAGE + HAMBURGER * 
 * nav-brand itself becomes transparent so Cases and Logo can participate 
 * directly in the main Grid. */ 
 #site-nav.nav-case .nav-brand { 
     display: contents;
     } 
 /* * Cases stays on the logical left. */ 
    #site-nav.nav-case .nav-work { 
        grid-column: 1; 
        grid-row: 1; 
        justify-self: start; 
        align-self: center; 
        margin: 0;
        } 
/* * Logo occupies the true middle Grid track. */ 
    #site-nav.nav-case .logo { 
        grid-column: 2; 
        grid-row: 1; 
        justify-self: center; 
        align-self: stretch; 
        justify-content: center; 
        padding-inline: 1rem;
        } 
    #site-nav.nav-case .logo h1 { 
        font-size: clamp(1.25rem, 5vw, 1.7rem); 
        text-align: center;
        } 
 
 /* ---------------------------------------------------------------------- MOBILE PORTFOLIO SUBTITLE ---------------------------------------------------------------------- */
 #site-nav .logo small { 
     display: block; 
     margin-top: 10px; 
     color: rgba(255, 255, 255, 0.9); 
     font-family: "Poppins", sans-serif; 
     /*font-size: 10px; */
     font-weight: 500; 
     line-height: 1; 
     /*letter-spacing: 10px; */
     text-align: center; 
     white-space: nowrap;
     } 
 
 /* ---------------------------------------------------------------------- MOBILE ACTIONS ---------------------------------------------------------------------- */ 
 /* * On mobile, nav-actions occupies the RIGHT grid track. * 
 * It contains: * * LANGUAGE HAMBURGER */ 
 #site-nav .nav-actions { 
     grid-column: 3; 
     grid-row: 1; 
     justify-self: end; 
     align-self: center; 
     display: flex; 
     align-items: 
     center; gap: 0;
     } 
     
 /* * Hide the desktop navigation links. *
 * They are revealed below when the JS adds an open state. */ 
 #site-nav .nav-actions #nav-links { 
     position: fixed; 
     top: var(--nav-h);
     inset-inline-start: 3vw; 
     inset-inline-end: 3vw; 
     width: auto; 
     display: none; 
     flex-direction: column; 
     align-items: stretch; 
     gap: 0; 
     margin: 0; 
     padding: 0.65rem 0.75rem 1rem; 
     background: rgba(255, 255, 255, 0.985); 
     -webkit-backdrop-filter: blur(16px); 
     backdrop-filter: blur(16px); 
     border: 0; 
     border-radius: 0 0 var(--radius-lg) var(--radius-lg); 
     box-shadow: var(--shadow-lg); 
     list-style: none; 
     z-index: 1001;
     } 
     
     /* * Open menu states. * * These are deliberately compatible with several common existing JS * patterns. 
     We will inspect your actual JS before choosing one. */ 
     #site-nav .nav-actions #nav-links.active, 
     #site-nav .nav-actions #nav-links.open, 
     #site-nav .nav-actions #nav-links.is-open, 
     #site-nav.menu-open .nav-actions #nav-links, 
     #site-nav.nav-open .nav-actions #nav-links,
     #site-nav.is-open .nav-actions #nav-links { 
         display: flex; } 
 
 /* PAGE DIMMER ---- */
 /* * When the mobile menu is open, the page behind it becomes dimmed. *
 * The nav itself remains above the backdrop. */ 
 #site-nav.menu-open::after, 
 #site-nav.nav-open::after, 
 #site-nav.is-open::after { 
     content: ""; 
     position: fixed; 
     top: var(--nav-h); 
     inset-inline: 0; 
     bottom: 0; 
     background: rgba(0, 0, 0, 0.38); 
     z-index: 1000; 
     pointer-events: auto;
     } 
     
 /* * Keep the navigation controls above the dimmer. */ 
 #site-nav .nav-actions, 
 #site-nav .nav-brand { 
     position: relative; 
     z-index: 1002;
     } 
 
 /* ---------------------------------------------------------------------- MOBILE MENU LINKS ---------------------------------------------------------------------- */ 
 #site-nav .nav-actions #nav-links li { 
     width: 100%; } 
 #site-nav .nav-actions #nav-links li a { 
     display: flex; 
     align-items: 
     center; width: 100%; 
     min-height: 46px; 
     padding: 0.65rem 0.9rem; 
     box-sizing: border-box; 
     border-radius: var(--radius); 
     font-size: 0.8rem; } 
 
 /* * No desktop underline on mobile. */ 
 #site-nav .nav-actions #nav-links li a::after { 
     display: none; }
     
 /* ---------------------------------------------------------------------- MOBILE LANGUAGE TOGGLE ---------------------------------------------------------------------- */ 
 #site-nav .nav-language { order: 1; width: 32px; height: 34px; margin: 0; margin-inline-end: 0.25rem; font-size: 1.05rem; color: var(--text-muted); } /* * On mobile the divider separates: * * LANGUAGE | HAMBURGER */ #site-nav .nav-language::before { inset-inline-start: auto; inset-inline-end: -0.05rem; top: 50%; height: 20px; } /* * Give the language icon a little breathing room from the divider. */ #site-nav .nav-language i { margin-inline-end: 0.35rem; }
 
 /* ---------------------------------------------------------------------- MOBILE HAMBURGER ---------------------------------------------------------------------- */ 
 #site-nav .nav-hamburger { order: 2; display: flex; width: 40px; height: 40px; margin: 0; /* * This pushes the actual strokes inward from the viewport edge. */ padding: 8px; } #site-nav .nav-hamburger span { width: 22px; height: 2px; } 
 
 /* ---------------------------------------------------------------------- MOBILE CASES ---------------------------------------------------------------------- */ 
 #site-nav.nav-case .nav-work span { 
     font-size: 1.05rem;
     } 
 #site-nav.nav-case .nav-work i { 
     font-size: 1rem; 
     color: var(--brand-blue-dark);
     }
 } 
 
 /* 10. RTL — DESKTOP ==== */
 /* * Homepage: * * LTR: * LOGO NAV | LANG * * RTL: * LANG | NAV LOGO */ 
 html[dir="rtl"] #site-nav.nav-home .nav-brand { 
     grid-column: 3; justify-content: end;
     } 
 html[dir="rtl"] #site-nav.nav-home .nav-actions { 
     grid-column: 1; 
     justify-self: start;
     } 
     
 /* * Case: * * LTR: * CASES + LOGO NAV | LANG * * RTL: * LANG | NAV LOGO + CASES */ html[dir="rtl"] #site-nav.nav-case .nav-brand { grid-column: 3; justify-content: end; } html[dir="rtl"] #site-nav.nav-case .nav-actions { grid-column: 1; justify-self: start; }
 
 /* 11. RTL — MOBILE === */ 
 @media (max-width: 768px) { 
     /* * Homepage: * * LANG + HAMBURGER LOGO */ 
     html[dir="rtl"] #site-nav.nav-home .nav-brand { 
         grid-column: 2; 
         justify-content: center;
         } 
     html[dir="rtl"] #site-nav.nav-home .nav-actions { 
         grid-column: 1; 
         justify-self: start;
         } 
     /* * Case: * * HAMBURGER + LANG LOGO CASES * * Logical mirroring is handled explicitly so the centered logo never * moves. */ 
     html[dir="rtl"] #site-nav.nav-case .nav-work { 
         grid-column: 3; 
         justify-self: end;
         } 
     html[dir="rtl"] #site-nav.nav-case .logo { 
         grid-column: 2; 
         justify-self: center;
         } 
     html[dir="rtl"] #site-nav.nav-case .nav-actions { 
         grid-column: 1; 
         justify-self: start;
         } 
     /* * RTL language / hamburger order. * * Visually: * * HAMBURGER | LANGUAGE */ 
     html[dir="rtl"] #site-nav .nav-language { 
         order: 2; 
         margin-inline-end: 0; 
         margin-inline-start: 0.25rem;
         } 
     html[dir="rtl"] #site-nav .nav-hamburger { 
         order: 1;
         } 
     /* * Arrow points in the appropriate logical direction. */ 
     html[dir="rtl"] #site-nav.nav-case .nav-work i { 
         transform: rotate(180deg);
         } 
     html[dir="rtl"] #site-nav.nav-case .nav-work:hover i { 
         transform: rotate(180deg);
         }
     }
 
 /* 12. SMALL MOBILE ==== */ 
    @media (max-width: 480px) { 
        #site-nav { 
            padding-inline: 0.7rem;
            } 
        #site-nav .logo { 
            padding-inline: 0.8rem;
            } 
        #site-nav .logo h1 { 
            font-size: clamp(1.15rem, 5vw, 1.5rem);
            } 
        #site-nav .logo small { 
            font-size: 0.4rem; 
            letter-spacing: 0.34em;
            }
        #site-nav.nav-case .nav-work span { 
            font-size: 0.98rem;
            } 
        #site-nav .nav-actions #nav-links { 
            inset-inline-start: 2vw; 
            inset-inline-end: 2vw;
            }
        }

/* 13. VERY SMALL MOBILE === */ 
    @media (max-width: 360px) { 
        #site-nav { 
            padding-inline: 0.45rem;
            } 
        #site-nav .logo { 
            padding-inline: 0.55rem;
            } 
        #site-nav .logo h1 { 
            font-size: 1.05rem;
        } 
        #site-nav .logo small { 
            font-size: 0.36rem; 
            letter-spacing: 0.3em;
            } 
        #site-nav.nav-case .nav-work span { 
            font-size: 0.9rem;
            } 
        #site-nav.nav-case .nav-work i { 
            font-size: 0.85rem;
            }
        #site-nav .nav-language { 
            width: 28px;
            } 
        #site-nav .nav-hamburger { 
            width: 36px;
            }
        }

/*  14. RTL NAVIGATION TYPOGRAPHY ======= */ 
 html[dir="rtl"] #site-nav .nav-links, 
 html[dir="rtl"] #site-nav .nav-links li, 
 html[dir="rtl"] #site-nav .nav-links li a, 
 html[dir="rtl"] #site-nav .nav-work, 
 html[dir="rtl"] #site-nav .nav-cta, 
 html[dir="rtl"] #site-nav .nav-language, 
 html[dir="rtl"] #site-nav .nav-hamburger { 
     font-family: "Cairo", sans-serif;
     } 
 html[dir="rtl"] #site-nav .logo h1, 
 html[dir="rtl"] #site-nav .logo h1 span { 
     font-family: "Tajawal", sans-serif; 
     font-size: clamp(1rem, 2vw + 0.6rem, 2rem); 
     font-weight: 700;
     } 
 html[dir="rtl"] #site-nav .logo small { 
     font-family: "Tajawal", 
     sans-serif; 
     font-size: 0.42rem; 
     font-weight: 500; 
     letter-spacing: 0.3em;
     } 
 html[dir="rtl"] #site-nav .nav-links li a { 
     font-size: 1rem; 
     letter-spacing: 0;
 } 
 
 /* 15. REDUCED MOTION ======== */ 
 @media (prefers-reduced-motion: reduce) { 
     #site-nav, #site-nav *, #site-nav *::before, #site-nav *::after { 
         animation: none !important; 
         transition: none !important;
         }
     }
 
 
 



/* ── SECTIONS COMMON ── */
section { padding: 60px 0 50px; }
section:nth-child(even) { background: var(--bg-off); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.container-wide { max-width: 1300px; margin: 0 auto; padding: 0 2rem; }

.section-eyebrow {
  font-family: "Raleway", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.section-eyebrow::before {
  content:'';
  display:inline-block;
  width:28px; height:2px;
  background: var(--accent-gold);
  border-radius:2px;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--bg-dark);
  margin-bottom: .5rem;
}
.section-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 860px;
  margin-top: .5rem;
  line-height: 1.75;
}



/* ── HERO ── */
#hero {
  min-height: 100vh;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: var(--nav-h) 0 0;
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,91,146,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,91,146,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-bg-glow {
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(11,91,146,.28) 0%, transparent 70%);
  right: -180px; top: -100px;
  pointer-events: none;
  animation: glowPulse 6s ease-in-out infinite alternate;
}
@keyframes glowPulse { from { opacity:.6; transform:scale(1); } to { opacity:1; transform:scale(1.08); } }

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: center;
  padding: 6rem 0 5rem;
}

.hero-eyebrow {
  font-family:"Raleway",sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--accent-gold);
  margin-bottom:1.2rem;
  opacity:0;
  animation: fadeUp .7s .2s ease forwards;
}
.hero-name {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight:700;
  color:#fff;
  line-height:1.05;
  margin-bottom:.5rem;
  opacity:0;
  animation: fadeUp .7s .35s ease forwards;
}
.hero-name em {
  font-style:normal;
  color: var(--brand-blue-mid);
}
.hero-title {
  font-family:"Raleway",sans-serif;
  font-size:1.05rem;
  font-weight:400;
  color:rgba(255,255,255,.6);
  margin-bottom:1.75rem;
  letter-spacing:.05em;
  opacity:0;
  animation: fadeUp .7s .5s ease forwards;
}
.hero-statement {
  font-size:1.08rem;
  line-height:1.8;
  color:rgba(255,255,255,.82);
  max-width:540px;
  margin-bottom:2.25rem;
  border-left:3px solid var(--brand-blue-mid);
  padding-left:1.1rem;
  opacity:0;
  animation: fadeUp .7s .65s ease forwards;
}
.hero-pillars {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:2.5rem;
  opacity:0;
  animation: fadeUp .7s .8s ease forwards;
}
.hero-pill {
  font-family:"Raleway",sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.4rem .95rem;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.75);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.hero-pill:hover { border-color: var(--brand-blue-mid); color:#fff; background:rgba(26,123,191,.15); }
.hero-btns {
  display:flex;
  gap:1rem;
  opacity:0;
  animation: fadeUp .7s .95s ease forwards;
}
.btn-primary {
  background: var(--brand-blue);
  color:#fff;
  font-family:"Raleway",sans-serif;
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.7rem 1.75rem;
  border-radius:var(--radius);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  border:2px solid var(--brand-blue);
}
.btn-primary:hover { background: var(--brand-blue-dark); color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(11,91,146,.35); }
.btn-ghost {
  background:transparent;
  color:rgba(255,255,255,.8);
  font-family:"Raleway",sans-serif;
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.7rem 1.75rem;
  border-radius:var(--radius);
  border:2px solid rgba(255,255,255,.25);
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.btn-ghost:hover { border-color:rgba(255,255,255,.6); color:#fff; transform:translateY(-2px); }

/* Hero photo */
.hero-photo-wrap {
  position:relative;
  opacity:0;
  animation: fadeIn 1s .7s ease forwards;
}
.hero-photo-wrap::before {
  content:'';
  position:absolute;
  inset:-12px;
  border:2px solid rgba(11,91,146,.35);
  border-radius: var(--radius-lg);
  transform: rotate(2deg);
}
.hero-photo {
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius: var(--radius-lg);
  position:relative;
  z-index:1;
  filter: saturate(.92);
}
.hero-photo-badge {
  position:absolute;
  bottom:-18px; left:-18px;
  background: var(--accent-gold);
  color: #fff;
  font-family:"Raleway",sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  padding:.6rem 1rem;
  border-radius:var(--radius);
  z-index:2;
  box-shadow: var(--shadow-md);
  text-transform:uppercase;
}

@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ── ABOUT / EXECUTIVE SUMMARY ── */
#about .about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 4rem;
  align-items:start;
}
.about-img-wrap {
  position:relative;
}
.about-img {
  width:100%;
  aspect-ratio: 4/5;
  object-fit:cover;
  border-radius:var(--radius-lg);
}
.about-img-caption {
  position:absolute;
  bottom:16px; right:16px;
  background:rgba(13,31,45,.88);
  color:#fff;
  font-size:.72rem;
  padding:.45rem .8rem;
  border-radius:var(--radius);
  font-family:"Raleway",sans-serif;
  letter-spacing:.06em;
}
.about-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:2rem;
}
.stat-card {
  background: var(--brand-blue-pale);
  border-radius:var(--radius);
  padding:1.1rem 1.25rem;
  border-left:3px solid var(--brand-blue);
}
.stat-num {
  font-family:"Raleway",sans-serif;
  font-size:1.85rem;
  font-weight:700;
  color: var(--brand-blue);
  line-height:1;
}
.stat-label {
  font-size:.75rem;
  color: var(--text-muted);
  margin-top:.3rem;
  font-weight:600;
  letter-spacing:.04em;
}
.about-text p { margin-bottom:1rem; font-size:.97rem; color: var(--text-muted); }
.about-text p:last-child { margin-bottom:0; }
.lang-badges { display:flex; gap:.6rem; margin-top:1.5rem; flex-wrap:wrap; }
.lang-badge {
  background: var(--bg-dark);
  color:#fff;
  font-size:.72rem;
  font-family:"Raleway",sans-serif;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.4rem .85rem;
  border-radius:100px;
}
.lang-badge.gold { background: var(--accent-gold); }

/* ── CAPABILITIES ── */
#capabilities .cap-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1.5rem;
  margin-top:3rem;
}
.cap-card {
  background: var(--bg-white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position:relative;
  overflow:hidden;
}
.cap-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.cap-card:hover { transform:translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--brand-blue); }
.cap-card:hover::before { transform:scaleX(1); }
.cap-card.gold::before { background: var(--accent-gold); }
.cap-card.gold:hover { border-color: var(--accent-gold); }
.cap-icon {
  width:44px; height:44px;
  background: var(--brand-blue-pale);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  color: var(--brand-blue);
  margin-bottom:1.1rem;
}
.cap-icon.gold { background: var(--accent-gold-light); color: var(--accent-gold); }
.cap-title {
  font-family:"Raleway",sans-serif;
  font-size:.95rem;
  font-weight:700;
  color: var(--bg-dark);
  margin-bottom:.5rem;
}
.cap-desc { font-size:.83rem; color: var(--text-muted); line-height:1.7; }
.cap-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.cap-tag {
  font-size:.68rem;
  font-family:"Raleway",sans-serif;
  font-weight:600;
  letter-spacing:.06em;
  padding:.25rem .6rem;
  background: var(--brand-blue-pale);
  color: var(--brand-blue);
  border-radius:100px;
}
.cap-tag.gold { background: var(--accent-gold-light); color: #8a6d1f; }

/* ── WORK SHOWCASE ── */
#work { padding:90px 0; }
/*#work .work-intro {
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:flex-end;
  margin-bottom:3rem;
}*/
.work-filter {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.filter-btn {
  font-family:"Raleway",sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.4rem .9rem;
  border-radius:100px;
  border:1px solid var(--border);
  color: var(--text-muted);
  background:transparent;
  cursor:pointer;
  transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color:#fff;
}

.work-grid {
margin-top: .5rem;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:1.75rem;
}

.work-card {
  background: var(--bg-white);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor:pointer;
  position:relative;
}
.work-card:hover { transform:translateY(-6px); box-shadow: var(--shadow-lg); }
.work-card[data-cat] { transition: opacity .4s ease, transform .4s ease; }
.work-card.hidden { display:none; }

.work-thumb {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background: var(--bg-off);
}
.work-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .5s ease;
}
.work-card:hover .work-thumb img { transform: scale(1.06); }
.work-thumb-overlay {
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, transparent 30%, rgba(13,31,45,.7));
  opacity:0;
  transition: opacity var(--transition);
  display:flex; align-items:center; justify-content:center;
}
.work-card:hover .work-thumb-overlay { opacity:1; }
.work-thumb-icon {
  width:48px; height:48px;
  background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.6);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:1rem;
  backdrop-filter:blur(4px);
}
.work-badge {
  position:absolute;
  top:12px; left:12px;
  background: var(--brand-blue);
  color:#fff;
  font-size:.65rem;
  font-family:"Raleway",sans-serif;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.25rem .65rem;
  border-radius:100px;
}
.work-badge.gold { background: var(--accent-gold); }
.work-badge.dark { background: var(--bg-dark); }

.work-body { padding:1.4rem; }
.work-client {
  font-size:.7rem;
  font-family:"Raleway",sans-serif;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--accent-gold);
  margin-bottom:.35rem;
}
.work-title {
  font-size:1rem;
  font-weight:700;
  color: var(--bg-dark);
  margin-bottom:.5rem;
  font-family:"Raleway",sans-serif;
}
.work-desc { font-size:.82rem; color: var(--text-muted); line-height:1.7; margin-bottom:1rem; }
.work-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:.85rem;
  font-size:.75rem;
  color: var(--text-light);
}

.work-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.work-tag {
  font-family:"Raleway",sans-serif;
  font-size:.65rem;
  font-weight:600;
  padding:.2rem .55rem;
  background: var(--bg-off);
  border-radius:100px;
  color: var(--text-muted);
  border:1px solid var(--border);
}
.work-read {
  font-family:"Raleway",sans-serif;
  font-size:.72rem;
  font-weight:600;
  color: var(--brand-blue);
  display:flex;
  align-items:center;
  gap:.3rem;
}
.work-read i { font-size:.6rem; transition: transform var(--transition); }
.work-card:hover .work-read i { transform:translateX(3px); }

/* Featured work card (spans 2 columns) */
.work-card.featured {
  grid-column: span 2;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
}
.work-card.featured .work-thumb { aspect-ratio: unset; }
.work-card.featured .work-body { padding:2rem 2rem 2rem 1.75rem; display:flex; flex-direction:column; justify-content:center; }
.work-card.featured .work-title { font-size:1.2rem; }
.work-card.featured .work-desc { font-size:.88rem; }

/* ── MEDIA / PRESS ── */
#media { background: var(--bg-off); }
.media-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:1.25rem;
  margin-top:3rem;
}
.media-card {
  background: var(--bg-white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.media-card:hover { box-shadow: var(--shadow-md); transform:translateY(-4px); }
.media-thumb {
  aspect-ratio:16/9;
  overflow:hidden;
  position:relative;
  background: var(--bg-dark);
}
.media-thumb img { width:100%; height:100%; object-fit:cover; opacity:.85; transition: opacity var(--transition); }
.media-card:hover .media-thumb img { opacity:1; }
.media-play {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.media-play-btn {
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(11,91,146,.85);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  transition: transform var(--transition), background var(--transition);
}
.media-card:hover .media-play-btn { transform:scale(1.1); background: var(--brand-blue); }
.media-body { padding:1.1rem 1.25rem; }
.media-type {
  font-size:.65rem;
  font-family:"Raleway",sans-serif;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--text-light);
  margin-bottom:.35rem;
}
.media-title {
  font-size:.9rem;
  font-weight:700;
  color: var(--bg-dark);
  margin-bottom:.4rem;
  font-family:"Raleway",sans-serif;
  line-height:1.35;
}
.media-outlet {
  font-size:.78rem;
  color: var(--brand-blue);
  font-family:"Raleway",sans-serif;
  font-weight:600;
}

/* ── TESTIMONIALS ── */
#testimonials {
  background: var(--bg-dark);
  position:relative;
  overflow:hidden;
}
#testimonials::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(11,91,146,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,91,146,.06) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
#testimonials .section-eyebrow::before { background: var(--accent-gold); }
#testimonials .section-title { color:#fff; }

.testi-slider {
  position:relative;
  margin-top:3rem;
  overflow:hidden;
}
.testi-track {
  display:flex;
  gap:1.75rem;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.testi-slide {
  min-width: calc(50% - .875rem);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding:2rem;
  flex-shrink:0;
}
.testi-quote {
  font-size:2rem;
  color: var(--accent-gold);
  line-height:1;
  margin-bottom:1rem;
  font-family:"Raleway",sans-serif;
}
.testi-text {
  font-size:.95rem;
  color:rgba(255,255,255,.8);
  line-height:1.8;
  margin-bottom:1.5rem;
  font-style:italic;
}
.testi-author {
  display:flex;
  align-items:center;
  gap:.9rem;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:1.1rem;
}
.testi-avatar {
  width:46px; height:46px;
  border-radius:50%;
  object-fit:cover;
  background: var(--brand-blue-pale);
  flex-shrink:0;
}
.testi-name {
  font-family:"Raleway",sans-serif;
  font-size:.88rem;
  font-weight:700;
  color:#fff;
}
.testi-role {
  font-size:.75rem;
  color:rgba(255,255,255,.5);
  margin-top:.15rem;
}
.testi-controls {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:2rem;
  justify-content:center;
}
.testi-btn {
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition: background var(--transition), border-color var(--transition);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.testi-btn:hover { background: var(--brand-blue); border-color: var(--brand-blue); }
.testi-dots { display:flex; gap:.5rem; }
.testi-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  cursor:pointer;
  transition: background var(--transition), transform var(--transition);
}
.testi-dot.active { background: var(--accent-gold); transform:scale(1.25); }

/* ── CONTACT ── */
#contact {
    background: var(--bg-white);
}

.contact-intro{
    max-width:700px;
    color:var(--text-muted);
    margin:0 0 2.75rem;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(260px,1fr));
    gap:2rem 3rem;              /* less vertical whitespace */
    align-items:start;
}

.contact-card{
    padding:0;
}

.contact-card h3{
    margin:0;
    font-size:1rem;
    font-weight:700;
    color:var(--bg-dark);
}

.contact-card p,
.contact-card a{
    margin:.35rem 0 0 1.8rem;   /* aligns under heading, not icon */
    font-size:.96rem;
    color:var(--text-main);
    line-height:1.55;
}

.contact-card a:hover{
    color:var(--brand-blue);
}

/* icon + title on same line */

.contact-icon{
    display:flex;
    align-items:center;
    gap:.7rem;
    margin-bottom:.1rem;
}

.contact-icon i{
    width:18px;
    text-align:center;
    font-size:1rem;
    color:var(--accent-gold);   /* elegant */
    /* or use var(--brand-blue); */
}

/* buttons */

.contact-actions{
    display:flex;
    gap:1rem;
    margin-top:3rem;
}

@media (max-width:768px){

    .contact-grid{
        grid-template-columns:1fr;
        gap:1.6rem;
    }

    .contact-actions{
        flex-direction:column;
    }

}

/*#contact { background: var(--bg-white); }*/
/*.contact-grid {*/
/*  display:grid;*/
/*  grid-template-columns:1fr 1fr;*/
/*  gap:4rem;*/
/*  align-items:start;*/
/*}*/
/*.contact-info-item {*/
/*  display:flex;*/
/*  gap:1rem;*/
/*  align-items:flex-start;*/
/*  margin-bottom:1.5rem;*/
/*}*/
/*.contact-info-icon {*/
/*  width:42px; height:42px;*/
/*  border-radius:10px;*/
/*  background: var(--brand-blue-pale);*/
/*  display:flex; align-items:center; justify-content:center;*/
/*  color: var(--brand-blue);*/
/*  font-size:.9rem;*/
/*  flex-shrink:0;*/
/*}*/
/*.contact-info-label {*/
/*  font-family:"Raleway",sans-serif;*/
/*  font-size:.7rem;*/
/*  font-weight:700;*/
/*  letter-spacing:.1em;*/
/*  text-transform:uppercase;*/
/*  color: var(--text-light);*/
/*  margin-bottom:.2rem;*/
/*}*/
/*.contact-info-value {*/
/*  font-size:.95rem;*/
/*  color: var(--bg-dark);*/
/*  font-weight:600;*/
/*}*/

/* ── FOOTER ── */
footer {
  background: var(--bg-dark);
  padding:2.5rem 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.footer-brand {
  font-family:"Raleway",sans-serif;
  font-weight:700;
  font-size:.95rem;
  color:#fff;
}
.footer-brand span { 
    color: var(--accent-gold); 
    font-size:1.1rem;
}
.footer-note {
  font-size:.75rem;
  color:rgba(255,255,255,.45);
}
.footer-social {
  display:flex;
  gap:.75rem;
}
.social-link {
  width:36px; height:36px;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6);
  font-size:.8rem;
  transition: background var(--transition), color var(--transition);
}
.social-link:hover { background: var(--brand-blue); color:#fff; border-color: var(--brand-blue); }

/* ── MOBILE NAV ── */
@media (max-width: 1224px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:var(--nav-h); left:0; right:0; background:#fff; padding:1rem 1.5rem; border-bottom:1px solid var(--border); box-shadow: var(--shadow-md); gap:.25rem; }
  .nav-links.open { display:flex; }
  .nav-hamburger { display:flex; }
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-photo-wrap { max-width:280px; margin:0 auto; }
  .hero-statement { border-left:none; border-top:3px solid var(--brand-blue-mid); padding:1rem 0 0; }
  .hero-pillars { justify-content:center; }
  .hero-btns { justify-content:center; }
  #about .about-grid { grid-template-columns:1fr; }
  #capabilities .cap-grid { grid-template-columns:1fr 1fr; }
  .work-card.featured { grid-column:span 1; display:block; }
  .work-card.featured .work-thumb { aspect-ratio:16/9; }
  .testi-slide { min-width:100%; }
  /*.contact-grid { grid-template-columns:1fr; }*/
  .footer-inner { flex-direction:column; text-align:center; }
  .work-intro { grid-template-columns:1fr; }
  .diff-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  #capabilities .cap-grid { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:1fr 1fr; }
  .container { padding:0 1.25rem; }
}

/* ── PROGRESS BAR ── */
#read-progress {
  position:fixed;
  top:0; left:0;
  height:3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--accent-gold));
  z-index:9999;
  width:0%;
  transition:width .1s linear;
}

/* Container used only when both buttons exist */
.page-controls{
    position:fixed;
    right:1.6rem;
    bottom:1.6rem;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    z-index:1200;
}


/* Shared button styles - BACK To TOP/CASES */
#back-cases,
#back-top{
    width:44px;
    height:44px;

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

    background:var(--brand-blue);
    color:#fff;
    border-radius:8%;

    box-shadow:var(--shadow-md);

    opacity:0;
    pointer-events:none;

    transition:
        opacity var(--transition),
        transform var(--transition);

    text-decoration:none;
}

/* Only the standalone Back-to-Top needs positioning */
body > #back-top{
    position:fixed;
    right:1.6rem;
    bottom:1.6rem;
    z-index:1200;
}

/* Show state */
#back-cases.show,
#back-top.show{
    opacity:1;
    pointer-events:auto;
}

#back-cases:hover,
#back-top:hover{
    color:#fff;
    transform:translateY(-3px);
}
/* ============================
/* ─── CASE STUDY PAGE (TRANSFORMATION) Scoped extensions only ──────── */

/* HERO (override to adapt from personal hero → case study hero) */
#hero.case-hero {
  min-height: auto;
  padding: calc(var(--nav-h) + 80px) 0 80px;
}

.case-hero .hero-inner {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.case-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: #fff;
  margin-bottom: 1rem;
}

.case-hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,.75);
  max-width: 700px;
}

/* META STRIP */
.case-meta {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.case-meta div {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1rem;
}

.case-meta strong {
  display: block;
  font-family: "Raleway", sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: .35rem;
}

.case-meta span {
  font-size: .85rem;
  color: rgba(255,255,255,.8);
}

/* SECTION WIDTH CONTROL */
.case-section .container {
  max-width: 820px;
}

/* PROBLEM LIST */
/*
#problem ul {
  list-style: none;
  margin-top: 1.5rem;
}

#problem li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .6rem;
  font-size: .95rem;
  color: var(--text-muted);
}

#problem li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--brand-blue);
  font-weight: 700;
}
*/

/* ROLE + APPROACH LISTS */
/*
#role ul,
#approach ul,
#outcomes ul {
  margin-top: .8rem;
  padding-left: 1.2rem;
}
*/
/*

#role li,
#approach li,
#outcomes li {
  margin-bottom: .5rem;
  font-size: .92rem;
  color: var(--text-muted);
}
*/

/* SUBSECTION HEADINGS */
/*
#approach h3 {
  font-family: "Raleway", sans-serif;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: .5rem;
  color: var(--brand-blue);
}
*/

/* TAKEAWAY (highlight block) */
/*
#takeaway {
  background: var(--brand-blue-pale);
}

#takeaway p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--bg-dark);
  max-width: 760px;
}
*/

/* ─────────────────────────────
   TYPOGRAPHY SYSTEM
───────────────────────────── */
.case-section {
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}

/* Base body text */
.case-section h3 {
  font-family: "Raleway", sans-serif;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: .5rem;
  color: var(--brand-blue);
}

.case-section p,
.case-section li {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Paragraph spacing */
.case-section p {
  margin-bottom: 1rem;
}

/* Lists */
.case-section ul {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  padding-left: 1.2rem;
}

/* List items */
.case-section li {
  margin-bottom: .45rem;
}

/* Nested lists (important for Outcomes) */
.case-section li ul {
  margin-top: .4rem;
  margin-bottom: .6rem;
}

/* Strong text */
.case-section strong {
  font-weight: 600;
  color: var(--text-dark);
}


.case-note {
  font-size: .9rem;
  color: var(--text-muted);
  margin-top: .6rem;
  max-width: 640px;
}

.case-highlight {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent-gold);
  background: rgba(0,0,0,.02);
  font-size: .92rem;
  line-height: 1.6;
}
/* ─────────────────────────────
   CASE VISUAL SYSTEM
───────────────────────────── */
/* wrapper */
.case-visual {
  margin: 2rem 0 2.5rem;
}

/* optional label (e.g. "Website", "Portal") */
.case-visual-label {
  font-family: "Raleway", sans-serif;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: .6rem;
}

/* grid variations */
.case-visual.grid-1 {
  display: grid;
  grid-template-columns: 1fr;
}

.case-visual.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.case-visual.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* card */
.case-visual-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
}

/* image */
.case-visual-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* caption */
.case-visual-caption {
  font-size: .75rem;
  color: var(--text-muted);
  padding: .65rem .85rem;
  border-top: 1px solid var(--border);
}

/* ── VIDEO ── */
.case-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.case-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── MEDIA / LINKS ── */
.case-media {
  margin-top: 2rem;
}

.case-media-label {
  font-family: "Raleway", sans-serif;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: .6rem;
}

.case-media-caption {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .6rem;
}

.case-links {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.case-links a {
  font-size: .85rem;
  color: var(--brand-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: border-color var(--transition);
}

.case-links a:hover {
  border-color: var(--brand-blue);
}

/* ── MOBILE ── */
@media (max-width: 880px) {
  .case-visual.grid-2,
  .case-visual.grid-3 {
    grid-template-columns: 1fr;
  }

    .case-meta {
    grid-template-columns: 1fr 1fr;
  }

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

  .case-hero .hero-inner {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .case-meta {
    grid-template-columns: 1fr;
  }
}
/* ================================================================ */
/* ---- YOUTUBE ---- */
.video-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.video-thumbnail {
  width: 100%;
  display: block;
}

/* Play button */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 1.5s infinite;
}

.play-button::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 22px;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent white;
}

/* Pulse animation */
@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Modal */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
}

.video-modal-content {
  position: relative;
  margin: 5% auto;
  width: 80%;
  max-width: 800px;
}

.video-modal iframe {
  width: 100%;
  height: 450px;
}

.close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
/* ============================= */