/* =========================================================
   Zainab Abbas — Portfolio (main site)
   Palette : Black #000 · Panel #0d0d0d / #111 · Gold #D4AF37 / #E3C65C
   Type    : Arial (body & headings) · Georgia (ZA logo mark)
   ========================================================= */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#111;
    line-height:1.8;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; }

/* sections that get anchored from the nav clear the fixed bar */
section[id]{ scroll-margin-top:90px; }

/* =========================================================
   NAVIGATION
   ========================================================= */
nav{
    position:fixed; top:0; left:0; width:100%;
    background:#000;
    padding:18px 8%;
    display:flex; align-items:center; justify-content:space-between;
    z-index:1000;
}
.logo{
    position:relative; display:block; width:62px; height:54px;
    font-family:Georgia, "Times New Roman", serif;
}
.logo .z, .logo .a{
    position:absolute; font-size:56px; color:#D4AF37;
    font-weight:400; line-height:1;
}
.logo .z{ left:4px; top:-4px; }
.logo .a{ left:22px; top:14px; }

.nav-links{ display:flex; list-style:none; gap:35px; }
.nav-links a{
    color:#fff; font-size:16px; font-weight:600; letter-spacing:.5px;
    transition:color .25s ease;
}
.nav-links a:hover{ color:#D4AF37; }

/* hamburger (hidden on desktop) */
.nav-toggle{
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{
    width:26px; height:3px; background:#D4AF37; border-radius:2px;
    transition:.3s ease;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
    background:#000; color:#fff;
    display:flex; align-items:center; justify-content:center;
    min-height:80vh; padding:120px 10% 60px; gap:70px;
}
.hero img{
    width:340px; border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}
.hero-text{ max-width:700px; }
.hero-text h1{ font-size:clamp(40px,6vw,72px); line-height:1.1; margin-bottom:12px; }
.hero-eyebrow{
    color:#D4AF37; font-size:18px; font-weight:600;
    letter-spacing:2px; margin-bottom:15px;
}
.hero-text h2{
    font-size:clamp(22px,3vw,30px); color:#D4AF37;
    margin-bottom:24px; line-height:1.4;
}
.hero-text p{ font-size:clamp(17px,2vw,21px); color:#ddd; margin-bottom:32px; line-height:1.8; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
    display:inline-block; padding:14px 28px;
    background:#D4AF37; color:#000; font-weight:bold;
    border-radius:8px; margin:0 12px 12px 0;
    transition:transform .25s ease, background .25s ease;
}
.btn:hover{ transform:translateY(-3px); background:#E3C65C; }

/* =========================================================
   GENERIC SECTION
   ========================================================= */
.section{ padding:80px 10%; }
.section-title{ font-size:clamp(32px,4.5vw,48px); margin-bottom:40px; }
.section-intro{ font-size:clamp(18px,2vw,22px); max-width:900px; margin-bottom:50px; color:#555; }
.card{
    background:#fff; padding:40px; border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

/* =========================================================
   METRICS STRIP
   ========================================================= */
.metrics{ background:#111; padding:30px 10%; }
.metrics-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:25px; text-align:center;
}
.metric-num{ color:#D4AF37; font-size:clamp(34px,4vw,48px); margin-bottom:5px; }
.metric-label{ color:#fff; font-size:18px; }

/* =========================================================
   FEATURED ARTICLE
   ========================================================= */
.featured{ background:#111; color:#fff; padding:80px 10%; }
.featured-box{
    border:1px solid rgba(212,175,55,.3); background:#0d0d0d;
    padding:clamp(28px,5vw,50px); border-radius:20px; text-align:center;
}
.featured-label{
    color:#D4AF37; font-size:15px; letter-spacing:3px;
    text-transform:uppercase; margin-bottom:15px;
}
.featured-title{ font-size:clamp(26px,4vw,42px); margin-bottom:20px; line-height:1.2; }
.featured-subtitle{ font-size:clamp(18px,2.4vw,22px); color:#D4AF37; margin-bottom:25px; font-style:italic; }
.featured-text{ font-size:18px; max-width:800px; margin:0 auto 30px; line-height:1.8; }
.featured-buttons{ display:flex; justify-content:center; gap:15px; flex-wrap:wrap; }
.featured-buttons .btn{ margin:0; }

/* =========================================================
   ABOUT / MY JOURNEY
   ========================================================= */
.about-section{ background:#000; color:#fff; padding:100px 8%; }
.section-label{ color:#E3C65C; letter-spacing:4px; text-transform:uppercase; font-size:14px; margin-bottom:20px; }
.about-title{ font-size:clamp(28px,4vw,42px); margin-bottom:0; line-height:1.2; color:#fff; font-weight:700; }
.gold-line{ width:80px; height:4px; background:#D4AF37; margin:30px 0 40px; border-radius:5px; }
.about-card{
    background:#0d0d0d; border:1px solid rgba(212,175,55,.25);
    box-shadow:0 0 30px rgba(212,175,55,.08); border-radius:20px;
    padding:clamp(28px,5vw,60px); transition:.3s;
}
.about-card:hover{ box-shadow:0 0 30px rgba(212,175,55,.12); }
.about-card p{ font-size:18px; line-height:2; color:#d9d9d9; max-width:1000px; margin-bottom:25px; }
.about-card blockquote{
    margin-top:40px; font-size:clamp(22px,3vw,34px); line-height:1.5;
    color:#D4AF37; font-style:italic; font-weight:600;
    border-left:4px solid #D4AF37; padding-left:25px;
}

/* =========================================================
   PROFESSIONAL JOURNEY + SELECTED WORK (shared card style)
   ========================================================= */
.journey-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px;
}
.journey-card{
    background:#fff; padding:35px; border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08); border-top:5px solid #D4AF37;
    transition:.3s;
}
.journey-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,.12); }
.journey-card h3{ color:#D4AF37; margin-bottom:15px; font-size:23px; line-height:1.3; }
.journey-card p{ font-size:17px; line-height:1.8; }
.journey-card .btn{ margin-top:20px; margin-right:0; }

/* =========================================================
   AREAS OF EXPERTISE
   ========================================================= */
.expertise{ background:#000; color:#fff; }
.expertise .section-title{ color:#D4AF37; }
.expertise-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; }
.expertise-card{
    background:#111; border:1px solid #D4AF37; padding:30px; border-radius:15px;
    text-align:center; font-weight:bold; transition:.3s;
}
.expertise-card:hover{ transform:translateY(-5px); box-shadow:0 0 20px rgba(212,175,55,.25); }

/* =========================================================
   ACHIEVEMENTS
   ========================================================= */
.achievements{ background:#000; padding:100px 10%; }
.achievements .section-title{ color:#D4AF37; margin-bottom:60px; }
.achievements-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:40px;
}
.ach-card{
    background:#0d0d0d; border:1px solid rgba(212,175,55,.25);
    padding:40px; border-radius:15px; box-shadow:0 0 25px rgba(212,175,55,.08);
}
.ach-card h3{ color:#D4AF37; font-size:26px; margin-bottom:25px; }
.ach-card ul{ color:#fff; line-height:2; font-size:18px; padding-left:20px; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-box{ text-align:center; }
.contact-text{ font-size:clamp(18px,2.2vw,22px); max-width:850px; margin:0 auto 24px; line-height:1.9; }
.contact-email{ font-size:20px; }
.contact-box a{ color:#D4AF37; font-weight:bold; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ background:#000; color:#fff; text-align:center; padding:40px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1000px){
    .hero{ flex-direction:column; text-align:center; gap:40px; }
    .hero img{ width:260px; }
    .hero-text{ max-width:600px; }
    .btn{ margin-right:8px; }
    .featured-buttons .btn{ margin:0; }
    .expertise-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:760px){
    nav{ padding:14px 6%; position:fixed; flex-wrap:wrap; }
    .nav-toggle{ display:flex; }
    .nav-links{
        flex-basis:100%; flex-direction:column; gap:0;
        max-height:0; overflow:hidden;
        transition:max-height .3s ease;
    }
    nav.open .nav-links{ max-height:340px; padding-top:14px; }
    .nav-links li{ width:100%; }
    .nav-links a{ display:block; padding:12px 2px; border-top:1px solid rgba(255,255,255,.08); }
    nav.open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
    nav.open .nav-toggle span:nth-child(2){ opacity:0; }
    nav.open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

    .section,.featured,.about-section,.achievements,.metrics{ padding-left:6%; padding-right:6%; }
    .section{ padding-top:60px; padding-bottom:60px; }
    .hero{ padding:110px 6% 50px; }
}

@media(max-width:600px){
    .expertise-grid{ grid-template-columns:1fr; }
    .ach-card{ padding:28px; }
    .about-card p{ font-size:17px; }
}