/* ============================================================
   RAM PORTFOLIO — Production CSS
   Design: Dark editorial portfolio · Sr. UI/UX Designer
   Palette: #F3F0F0 bg · #1e1e1e cards · #e8883a accent orange
   ============================================================

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────
   1.  FONT IMPORT
   2.  DESIGN TOKENS (Custom Properties)
   3.  RESET & BASE
   4.  GLOBAL UTILITIES
   5.  ANIMATIONS & KEYFRAMES
   6.  NOISE TEXTURE OVERLAY
   7.  CUSTOM CURSOR
   8.  LAYOUT — Site Shell
   9.  NAVIGATION
   10. HOME PAGE — Hero / Intro
   11. HOME PAGE — Project Cards
       11a. Base card
       11b. IDA card (blue variant)
       11c. Oiot card (image bg variant)
   12. HOME PAGE — Currently Working Section
   13. HOME PAGE — Right Column (About sidebar)
       13a. Hello / bio
       13b. Skills
       13c. Experience list
       13d. Stats row
       13e. Contact / Social
   14. FOOTER
   15. STORY PAGE — Layout shell
   16. STORY PAGE — Side info panels
   17. STORY PAGE — Bio & resume button
   18. STORY PAGE — Education & Experience sections
   19. RESPONSIVE OVERRIDES
       19a. ≤1024px (collapse two-col layout)
       19b. ≤980px  (hero / currently stack)
       19c. ≤900px  (story page stack)
       19d. ≤768px  (mobile nav, grid collapses)
       19e. ≤480px  (small tweaks)
   ============================================================ */



/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:          #F3F0F0;
  --bg-card:     #242424;
  --bg-card-alt: #2a2a2a;
  --surface:     #2e2e2e;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.14);

  /* Text */
  --text-primary:   #000000;
  --text-secondary: #a09d97;
  --text-muted:     #6a6762;

  /* Accent colours */
  --accent:      rgba(232, 136, 58, 0.12);
  --accent-soft: rgba(232, 136, 58, 0.12);
  --accent-glow: rgba(232, 136, 58, 0.25);
  --blue-accent: #3a8ce8;

  /* Typography */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Montserrat', sans-serif;
  --font-mono:    'Montserrat', sans-serif;

  /* Border radius scale */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-card:  0 2px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.5),  0 2px 8px rgba(0, 0, 0, 0.3);

  /* Motion */
  --transition:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}




/* ============================================================
   4. GLOBAL UTILITIES
   ============================================================ */

.text-accent { color: var(--accent); }
.text-muted   { color: var(--text-muted); }

/* Badge chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Horizontal rule */
hr.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: clamp(24px, 3vw, 40px) 0;
}

/* Section label / count (used above project list) */
.section-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.section-label,
.section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-count { letter-spacing: 0.06em; }


/* ============================================================
   5. ANIMATIONS & KEYFRAMES
   ============================================================ */

/* Scroll-reveal utility */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Avatar ring spin */
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   6. NOISE TEXTURE OVERLAY
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  
  z-index: 0;
  mix-blend-mode: overlay;
  display: none !important;
}


/* ============================================================
   7. CUSTOM CURSOR
   ============================================================ */

.cursor {
  position: fixed;
  z-index: 9999;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.25s, height 0.25s, opacity 0.25s;
  mix-blend-mode: normal;
}

.cursor-ring {
  position: fixed;
  z-index: 9998;
  width: 36px;
  height: 36px;
  border: 1.5px solid black;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, width 0.3s, height 0.3s, border-color 0.3s;
}

/* Expand ring on interactive hover */
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring {
  width: 56px;
  height: 56px;
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .cursor,
  .cursor-ring { display: none; }
}


/* ============================================================
   8. LAYOUT — Site Shell
   ============================================================ */

.site-wrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* main grid (index.html) */



.col-right::-webkit-scrollbar { display: none; }

/* story.html — right column override */
.story-page .col-right {
  max-width: 720px;
  margin: 0 auto;
}

 /* =========================================
   PAGE LOADER
========================================= */

.page-loader {
  position: fixed;
  inset: 0;

  background: #f5f3ee;

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

  z-index: 99999;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}

/* HIDE STATE */

.page-loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================================
   INNER
========================================= */

.loader-inner {
  display: flex;
  flex-direction: column;

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

  text-align: center;

  gap: 20px;
}

/* =========================================
   LOGO WRAP
========================================= */

.loader-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* IMPORTANT:
   DO NOT USE .logo HERE
   IT COLLIDES WITH NAVBAR LOGO CSS
*/

.loader-logo svg {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  width: 140px;
  height: auto;

  display: block;

  animation:
    loaderFloat 1.6s ease-in-out infinite alternate;
}

/* =========================================
   ANIMATED LINE
========================================= */

.loader-line {
  width: 180px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #111,
      transparent
    );

  background-size: 200% 100%;

  border-radius: 999px;

  animation:
    loaderLineMove 1.4s linear infinite;
}

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

@keyframes loaderFloat {
  from {
    transform: translateY(0px);
    opacity: 0.85;
  }

  to {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes loaderLineMove {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}
/* ============================================================
   9. NAVIGATION
   ============================================================ */

/* =========================================
   FIXED GLASS NAVBAR
========================================= */

/* =========================================
   HEADER
========================================= */

header {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  background: transparent !important;
  z-index: 1000;
  /* pointer-events: none; */
}

/* =========================================
   NAV LAYOUT
========================================= */

.nav {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  width: 100%;
}

/* =========================================
   LOGO (TOP LEFT)
========================================= */

.logo {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  display: flex;
  align-items: center;

  z-index: 1000;
}

/* .logo img {
  width: 110px;
  height: auto;
  display: block;
} */

/* HIDE LOGO ON SCROLL */

header.nav-scrolled .logo {
  opacity: 0;
  transform: translateY(-70%);
  /* pointer-events: none; */
}

/* =========================================
   GLASS PILL
========================================= */

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.65rem;

  list-style: none;

  margin: 0;
  padding: 10px;

  width: fit-content;

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

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

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: 999px;

 

  pointer-events: auto;
}

/* =========================================
   LINKS
========================================= */

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 22px;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;

  color: black;
  text-decoration: none;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease;
}

.nav-links a::after {
  display: none;
}

/* HOVER */

/* HOVER ONLY NON-ACTIVE LINKS */

.nav-links a:not(.active):hover {
  border: 1px solid black;
  color: var(--text-muted);

  transform: translateY(-1px);
}

/* ACTIVE */

.nav-links a.active {
  background: black;
  color: white;
}

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

.menu-toggle {
   position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);

  display: none;

  z-index: 9999;
}

/* =========================================
   BODY OFFSET
========================================= */

body {
  padding-top: 120px;
}

/* ============================================================
   10. HOME PAGE — Hero / Intro
   ============================================================ */

.hero-intro {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(80px, 12vw, 240px);
  
  align-items: start;
  padding-top: clamp(80px, 10vw, 140px);
  margin: 0 auto;
  width: min(1400px, 92%);
}

/* Left meta column */
.hero-left { position: relative; }

.hero-kicker {
  font-size: 1rem;
  margin-bottom: 24px;
  color: var(--text);
  letter-spacing: -0.02em;
   display: flex;
  
  gap: 0.5rem;
  flex-direction: column;
}
.kicker-icon {
  width: 48px;
  height: auto;
  flex-shrink: 0;
}
.hero-about-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 220px;
}

.hero-about-copy p {
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

/* Right hero column */
.hero-right { 
  max-width: 900px;
  

}

.hero-headline {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.07em;
  margin: 40px 0;
}

.line-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.emoji-inline {
  font-size: 0.4em;
  vertical-align: middle;
  opacity: 1;
  transform: translateY(-4px);
}

.hero-subtext {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  /* color: var(--text-muted); */
  letter-spacing: -0.02em;
}

.hero-subtext span {
  color: var(--text);
  font-weight: 600;
}


/* ============================================================
   11. HOME PAGE — Project Cards
   ============================================================ */

.projects-section{
  margin-bottom:clamp(40px,5vw,72px);
  margin: 0 auto;
  width: min(1400px, 92%);
}

/* ─────────────────────────────────────────
   BASE CARD
───────────────────────────────────────── */

.project-card{
  position:relative;
  overflow:hidden;

  min-height:420px;
  height:420px;

  /* background:
    radial-gradient(circle at top left,#7D9EBD 0%,#131313 100%); */

  border:1px solid var(--border);
  border-radius:var(--radius-xl);

 margin-bottom: clamp(48px, 5vw, 92px);

  cursor:pointer;

  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.project-card:hover{
  border-color:var(--border-hover);
  box-shadow:var(--shadow-hover);

  transform:scale(0.976);
}

/* ─────────────────────────────────────────
   INNER LAYOUT
───────────────────────────────────────── */

.project-card-inner{
  position:relative;

  display:grid;
  grid-template-columns:minmax(320px,420px) 1fr;

  align-items:center;

  gap:clamp(40px,4vw,70px);

  height:100%;

  padding:clamp(24px,2.5vw,32px);
}

/* ─────────────────────────────────────────
   CONTENT
───────────────────────────────────────── */

.project-content{
  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:24px;

  max-width:460px;

  height:100%;
}

/* ─────────────────────────────────────────
   LOGO
───────────────────────────────────────── */

.project-logo-wrap{
  display:flex;
  align-items:center;
}

.project-logo{
  height:44px;
  width:auto;

  object-fit:contain;
}

/* ─────────────────────────────────────────
   DESCRIPTION
───────────────────────────────────────── */

.project-desc{
  font-size:13px;
  font-weight:300;
  line-height:1.65;

  color:var(--text-secondary);
}

/* ─────────────────────────────────────────
   CASE STUDY LINK
───────────────────────────────────────── */

.project-link{
  position:absolute;

  top:24px;
  right:24px;

  z-index:50;

  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 16px;

  background:rgba(0,0,0,.55);

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

  border:1px solid rgba(255,255,255,.08);

  border-radius:999px;

  font-size:12px;
  font-weight:500;

  color:white;
  text-decoration:none;

  opacity:0;
  visibility:hidden;

  transform:translateY(12px);

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility .35s ease,
    background .3s ease,
    gap .3s ease;
}

.project-card:hover .project-link{
  opacity:1;
  visibility:visible;

  transform:translateY(0);
}

.project-link:hover{
  gap:10px;
}

.project-link svg{
  width:14px;
  height:14px;

  transition:transform var(--transition);
}

.project-link:hover svg{
  transform:translate(2px,-2px);
}
.project-card-link{
  position:absolute;
  inset:0;
  z-index:20;
}


/* ─────────────────────────────────────────
   VISUAL AREA
───────────────────────────────────────── */

.project-visual{
  position:relative;

  width:100%;
  height:100%;

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

  overflow:hidden;
}

/* ─────────────────────────────────────────
   IMAGE WRAP
───────────────────────────────────────── */

.project-image-wrap{
  position:relative;

  width:100%;
  height:100%;

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

  overflow:hidden;

  top:30px;
  left:40px;

  background:var(--surface);
}

.project-image-wrap img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:transform var(--transition-slow);
}

.project-card:hover .project-image-wrap img{
  transform:scale(1.02);
}

/* ─────────────────────────────────────────
   Basic CARD
───────────────────────────────────────── */

.project-card.basic-card{
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.02),
      rgba(0,0,0,0.08)
    ),
    url("../assets/images/ida-background.png");

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

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

  isolation: isolate;
}

/* ─────────────────────────────────────────
   IDA CARD
───────────────────────────────────────── */

.project-card.ida-card{
  background:#45699E;
  border-color:rgba(58,140,232,.15);
}

.ida-card .project-card-inner{
  grid-template-columns:minmax(320px,420px) 1fr;
}

.ida-card .project-visual{
  height:100%;
}

.ida-card .project-image-wrap{
  background:transparent;

  box-shadow:
    0 20px 60px rgba(0,0,0,.3);
}

.ida-card .project-image-wrap img{
  object-fit:contain;
  object-position:center;
}

/* ─────────────────────────────────────────
   OIOT CARD
───────────────────────────────────────── */

.project-card.project-oiot{
  background-image:url("../assets/images/project-oiot.png");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.project-card.project-oiot::before{
  content:'';

  position:absolute;
  inset:0;

  z-index:1;

  background:
    linear-gradient(
      to right,
      rgba(10,10,10,.88) 20%,
      rgba(10,10,10,.35) 70%
    );
}

.project-card.project-oiot .project-card-inner{
  position:relative;
  z-index:2;
}

/* .project-card.project-oiot .project-content{
  justify-content:flex-end;

  padding-bottom:24px;
} */

.project-card.project-oiot .project-link{
  z-index:10;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */ 

 @media(max-width:980px){

  .project-card{
    height:auto;
    min-height:auto;
  }

  .project-card-inner{
    grid-template-columns:1fr;
    gap:32px;
  }

  .project-visual{
    min-height:320px;
  }

}

@media(max-width:768px){

  .project-card-inner{
    padding:20px;
  }

  .project-link{
    top:20px;
    right:20px;
  }

  .project-visual{
    min-height:260px;
  } 

 }
/* ============================================================
   12. HOME PAGE — Currently Working Section
   ============================================================ */

.currently-section {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
  padding: clamp(80px, 10vw, 140px) 0;
  margin: 0 auto;
  width: min(1400px, 92%);
}

/* Sticky left column */
.currently-side {
  position: sticky;
  top: 100px;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}



.currently-side-title {
  font-size: 1rem;
  margin-bottom: 18px;
  color: var(--text);
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

.currently-services {
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.currently-services li {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

/* Main content */
.currently-main {
  max-width: 860px;
  margin-left: 4rem;
}

.currently-headline {
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.06em;
  margin-bottom: 48px;
}

.currently-headline span {
  font-weight: 400;
  opacity: 0.92;
}

/* Client logos row */
.client-logos {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 52px;
}

.logo-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  opacity: 0.5;
}

.client-logo {
  height: 20px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}

.ida-logo   { height: 16px; }
.basic-logo { height: 18px; }

/* Body copy block */
.currently-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 620px;
  margin-bottom: 56px;
}

.currently-copy p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--text-muted);
  letter-spacing: -0.015em;
}

/* "Know more" pill link — shared with story page */
.story-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text);
  transition: transform 0.3s ease, background 0.3s ease;
}

.story-link svg { width: 14px; height: 14px; }

.story-link:hover {
  
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid black;
  color: var(--text-muted);
  transform: translateY(-1px);
}


/* ============================================================
   13. HOME PAGE — Right Column (About sidebar)
   ============================================================ */

.right-col-content {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
  padding: 0 0 clamp(40px, 5vw, 80px);
}

/* ── 13a. Hello / bio ── */

.about-hello {
  padding-top: clamp(20px, 2.5vw, 32px);
}

.hello-greeting {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.hello-greeting em {
  font-style: italic;
  color: var(--accent);
}

/* Avatar with decorative ring */
.avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.avatar-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: conic-gradient(from 0deg, var(--accent) 0%, transparent 30%, transparent 70%, var(--accent) 100%);
  opacity: 0.3;
  animation: ring-spin 8s linear infinite;
}

.avatar-img {
  position: relative;
  z-index: 1;
  width: clamp(80px, 9vw, 120px);
  height: clamp(80px, 9vw, 120px);
  border-radius: 50%;
  border: 2px solid var(--border);
  object-fit: cover;
}

.avatar-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  z-index: 2;
  width: 14px;
  height: 14px;
  background: #4ade80;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.about-bio {
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.about-bio strong {
  font-weight: 500;
  color: var(--text-primary);
}

/* ── 13b. Skills ── */

.skills-section {
  border-top: 1px solid var(--border);
  padding-top: clamp(24px, 3vw, 36px);
}

.skills-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.skill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.skill-item:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: var(--bg-card-alt);
}

.skill-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

/* ── 13c. Experience list ── */

.experience-section {
  border-top: 1px solid var(--border);
  padding-top: clamp(24px, 3vw, 36px);
}

.exp-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.exp-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.exp-item:last-child { border-bottom: none; }

.exp-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.exp-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.exp-info { flex: 1; }

.exp-role {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.exp-company {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.exp-period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ── 13d. Stats row ── */

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.stat-item {
  background: var(--bg-card);
  padding: clamp(16px, 2vw, 24px);
  text-align: center;
  transition: background var(--transition);
}

.stat-item:hover { background: var(--bg-card-alt); }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.stat-number span { color: var(--accent); }

.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── 13e. Contact / Social ── */

.contact-section {
  border-top: 1px solid var(--border);
  padding-top: clamp(24px, 3vw, 40px);
}

.contact-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-email {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 17px);
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 20px;
  transition: color var(--transition);
}

.contact-email:hover { color: var(--accent); }

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  transition: all var(--transition);
}

.social-link:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: var(--bg-card-alt);
  transform: translateY(-1px);
}

.social-link svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}


/* ============================================================
   14. FOOTER
   ============================================================ */

.footer {
  width: 100%;
  background: black;
  border-top: 1px solid var(--border);
  padding: clamp(32px, 4vw, 56px) 0;
  text-align: center;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-cta {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 17px);
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.7);
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  cursor: pointer;
  transition: color var(--transition);
}

.footer-cta-btn:hover { color:  #ffde34; }

.footer-cta-btn .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 3.5vw, 52px);
  height: clamp(32px, 3.5vw, 52px);
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0.5em;
  font-style: normal;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.footer-cta-btn:hover .arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: rotate(45deg);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 32px;
}
.footer-socials {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 24px;

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

  line-height: 1;
}

.footer-socials a {
  font-size: 0.95rem;
  text-decoration: none;
  color: #fff;

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

  position: relative;
  line-height: 1;
  padding: 4px 2px;

  transition: opacity .3s ease;
}

.footer-socials a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;

  width: 0%;
  height: 1px;
  background: var(--accent); /* use same color or accent, not #1e1e1e */

  transition: width .35s ease;
}

.footer-socials a:hover{
  opacity:.7;
}

.footer-socials a:hover::after{
  width:100%;
}

/* ============================================================
   15. STORY PAGE — Layout shell
   ============================================================ */
/* ==========================================================
   LAYOUT
   ========================================================== */

.story-hero{
  width:min(1400px,92%);
  margin:0 auto;

  display:grid;

  grid-template-columns:220px 1fr;

  column-gap:130px;

  padding-top:40px;
}


/* ==========================================================
   LEFT SIDEBAR
   ========================================================== */

.story-left-column{
  display:flex;
  flex-direction:column;

  justify-content:space-between;

  min-height:100vh;

  padding-top:320px;
  
}


.story-side-block{
  max-width:180px;
  
}


.story-side-block h3{
  font-size:1.3rem;

  font-weight:500;

  color:#8d8d8d;

  margin:0 0 24px;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}


.story-side-block ul{
  list-style:none;

  padding:0;
  margin:0;
}


.story-side-block li{
  font-size: 0.78rem;
  line-height: 1.8;
  color: black;
  letter-spacing: -0.01em;
  font-weight:300;
}


/* .story-emoji{
  display:none;
} */


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

.story-right-column{
  width:100%;
}


/* ==========================================================
   HERO HEADING
   ========================================================== */

.story-intro{
  max-width:980px;

  margin-top:80px;
}


.story-heading{
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.07em;
    margin: 40px 0;
}


.story-heading span{
  display:inline-block;

  /* padding:.05em .45em; */

  

  border-radius:999px;

  /* margin-left:10px; */

  white-space:nowrap;
}


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

.story-image-wrap{
  margin-top:120px;
}


.story-avatar{
  width: min(720px, 100%);
  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: 50%;

  display: block;
}

/* ==========================================================
   BIO
   ========================================================== */

.story-bio{
  max-width:760px;
  margin-top:60px;
}


.story-bio p{
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    letter-spacing: -0.015em;

  margin-bottom:24px;
}


/* ==========================================================
   RESUME BUTTON
   ========================================================== */

.story-resume-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text);
  transition: transform 0.3s ease, background 0.3s ease;
}


.story-resume-btn:hover{
  border: 1px solid black;
  color: var(--text-muted);
  transform: translateY(-1px);
}


/* ==========================================================
   SECTION LAYOUT
   ========================================================== */

.story-education,
.story-experience{
  width:min(1400px,92%);

  margin:180px auto 0;

  display:grid;

  grid-template-columns:220px 1fr;

  column-gap:90px;
}
.story-experience{
  padding-bottom:clamp(80px, 10vw, 140px) ;
}

.story-section-left h2{
  font-size:1.8rem;

  line-height:1;

  font-weight:400;

  letter-spacing:-0.05em;

  color:#111;

  margin:0;

  display: flex;
  gap: 0.5rem;
  flex-direction: column;

  
}


/* ==========================================================
   ROWS
   ========================================================== */

.edu-item,
.exp-row{
  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:40px;

  padding:1.5em 0;

  border-bottom:1px solid rgba(0,0,0,.08);

  
}


.edu-item h3,
.exp-row h3{
  font-size:1.5rem;

  line-height:1.05;

  letter-spacing:-0.05em;

  font-weight:400;

  color:#111;

  margin:0 0 10px;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}


.edu-item span,
.exp-row span{
  font-size:.9rem;

  color:#8d8d8d;

  white-space:nowrap;
}


.exp-row p{
  font-size:.95rem;

  color:#666;

  margin:6px 0 0;
}


/* ==========================================================
   REVEAL
   ========================================================== */

.reveal{
  opacity:0;

  transform:translateY(24px);

  transition:
    opacity .7s cubic-bezier(.2,.8,.2,1),
    transform .7s cubic-bezier(.2,.8,.2,1);
}


.reveal.active{
  opacity:1;

  transform:translateY(0);
}


.reveal-delay-1{
  transition-delay:.08s;
}

.reveal-delay-2{
  transition-delay:.16s;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px){

  .story-hero,
  .story-education,
  .story-experience{
    grid-template-columns:1fr;
  }

  .story-left-column{
    min-height:auto;

    flex-direction:row;

    flex-wrap:wrap;

    gap:40px;

    padding-top:40px;
  }

  .story-intro{
    margin-top:20px;
  }

  .story-heading{
    font-size:4rem;
  }

  .story-avatar{
    height:auto;
  }

}


@media (max-width: 768px){

  .story-heading{
    font-size:3rem;

    line-height:1;
  }

  .story-heading span{
    display:block;

    width:max-content;

    margin-top:16px;
    margin-left:0;
  }

  .story-image-wrap{
    margin-top:60px;
  }

  .edu-item,
  .exp-row{
    flex-direction:column;

    gap:14px;
  }

}

/* ============================================================
   19. RESPONSIVE OVERRIDES
   ============================================================ */

/* ── 19a. ≤1024px — collapse two-col main grid ── */

@media (max-width: 1024px) {
  .main-grid { grid-template-columns: 1fr; }

  .col-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: clamp(40px, 5vw, 72px);
    margin-bottom: clamp(40px, 5vw, 72px);
  }

  .col-right {
    padding-left: 0;
    position: static;
    height: auto;
    overflow: visible;
  }
}

/* ── 19b. ≤980px — hero & currently-section stack ── */

@media (max-width: 980px) {
  .hero-intro {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .hero-about-copy { max-width: 100%; }
  .hero-headline   { line-height: 1; }

  .currently-section {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .currently-side {
    position: relative;
    top: unset;
  }

  .currently-headline { line-height: 1; }

  .client-logos {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ── 19c. ≤900px — story page stacks ── */

@media (max-width: 900px) {
  .story-hero,
  .story-text-grid,
  .story-education,
  .story-experience {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .story-heading { font-size: 52px; }

  .edu-item,
  .exp-row { flex-direction: column; }

  .edu-item h3,
  .exp-row h3 { font-size: 28px; }
}

/* ── 19d. ≤768px — mobile nav, misc collapses ── */

@media (max-width: 768px) {



  /* =========================
     NAVBAR BECOMES FIXED ONLY ON MOBILE
  ========================= */

  .nav {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 64px;

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

    z-index: 1000;

    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* =========================
     LOGO (LEFT ANCHOR)
  ========================= */

  .logo {
     position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width:80px;
  }

  /* =========================
     HAMBURGER (RIGHT ANCHOR)
  ========================= */

  .menu-toggle {
    position: absolute;
    
  

    display: flex;
    flex-direction: column;
    gap: 5px;

    background: transparent;
    border: none;
    cursor: pointer;

    z-index: 99999;
    
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  }
.menu-toggle span {
  width: 24px;
  height: 2px;
  display: block; /* IMPORTANT */
  background: #111
}


  /* =========================
     DROPDOWN MENU
  ========================= */

 .nav-links {
  position: absolute;
  top: 64px;
  right: 16px;

  width: 180px;

  display: flex;
  flex-direction: column;

  padding: 12px;

  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);

  border-radius: 14px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

  z-index: 999;

  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;

  transition: 0.25s ease;
}
/* OPEN STATE */
.nav-links.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-links a {
  padding: 10px 8px;
  border-radius: 8px;
  text-align: left;
  transition: 0.2s;
}

.nav-links a:hover {
  background: rgba(0, 0, 0, 0.05);
}

  .stats-row { grid-template-columns: 1fr 1fr; }

  .stats-row .stat-item:last-child { grid-column: span 2; }

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

  /* =========================
   PROJECT CARD RESET (MOBILE)
========================= */

.project-card{
  display:block;
  position:relative;

  min-height:220px;

  padding:20px;
  margin-bottom:18px;

  border-radius:14px;
  overflow:hidden;
}

/* =========================
   INNER LAYOUT
========================= */

.project-card-inner{
  display:block;
  position:relative;

  height:100%;

  padding-top:58px;
}

/* =========================
   REMOVE VISUAL SECTION
========================= */

.project-visual{
  display:none !important;
}

/* =========================
   CONTENT ONLY LAYOUT
========================= */

.project-content{
  width:100%;
}

.project-logo-wrap{
  margin-bottom:10px;
}

.project-logo{
  max-width:110px;
  height:auto;
}

.project-desc{
  font-size:14px;
  line-height:1.6;
  opacity:0.9;
}

/* =========================
   CASE STUDY LINK
========================= */

.project-link{
  position:absolute;

  top:14px;
  right:14px;

  z-index:3;

  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 10px;

  font-size:12px;
  font-weight:500;

  color:#111;
  text-decoration:none;

  border:1px solid rgba(0,0,0,0.15);
  border-radius:999px;

  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(10px);

  opacity:1;
  visibility:visible;

  transition:0.2s ease;
}

/* =========================
   LINK BEHAVIOR FIX
========================= */

.project-card-link{
  position:absolute;
  inset:0;

  z-index:1;
}

/* keep CTA clickable above overlay */

.project-link{
  z-index:4;
}

/* =========================
   CLEAN SPACING
========================= */

.project-card + .project-card{
  margin-top:16px;
}
  /* ---------------------------
     STORY HERO LAYOUT FIX
  ---------------------------- */
  .story-hero {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 100px;
  }
  .story-right-column{
    order:1;
  }
  .story-left-column{
    order: 2;
  }
  .story-left-column,
  .story-right-column {
    width: 100%;
  }

  /* SIDE BLOCKS STACK */
  .story-side-info,
  .story-tools {
    margin-bottom: 24px;
  }

  .story-side-block ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .story-side-block ul li {
    font-size: 12px;
    opacity: 0.85;
  }

  /* ---------------------------
     INTRO TEXT
  ---------------------------- */
  .story-heading {
    font-size: 28px;
    line-height: 1.2;
  }

  .story-heading span {
    font-size: 16px;
  }

  .story-hero{
    padding-top:0;
  }

  /* ---------------------------
     IMAGE FIX
  ---------------------------- */
  .story-image-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .story-avatar {
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: cover;
  }

  /* ---------------------------
     BIO TEXT
  ---------------------------- */
  .story-bio p {
    font-size: 14px;
    line-height: 1.6;
  }

  .story-resume-btn {
    display: inline-block;
    margin-top: 20px;
  }

  /* ---------------------------
     EDUCATION + EXPERIENCE
  ---------------------------- */
  .story-education,
  .story-experience {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .story-section-left {
    margin-bottom: 10px;
  }

  .edu-item h3,
  .exp-row h3 {
    font-size: 16px;
  }

  .exp-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
  }

  /* ---------------------------
     FOOTER FIX (YOUR BIG ISSUE)
  ---------------------------- */
  .footer-inner {
    text-align: center;
    
  }

  .footer-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .footer-cta-btn {
    margin-top: 20px;
  }

  /* REMOVE RANDOM RIGHT SPACE ISSUES */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
}



/* ── 19e. ≤480px — small gap tweaks ── */

@media (max-width: 480px) {
  .social-links { gap: 8px; }
  .client-logos { gap: 12px; }
}