:root{--bg:#f6f3ee;--bg-warm:#eae7e0;--bg-dark:#1a1a18;--text:#1a1a18;--text-light:#7a7368;--text-muted:#b0a898;--border:#ddd8cf;--accent:#c45d3e}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Darker Grotesque',sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 40px;display:flex;justify-content:space-between;align-items:center;background:rgba(246,243,238,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);cursor:pointer}
.nav-wordmark-group{display:flex;flex-direction:column;gap:2px}
.nav-wordmark{font-weight:700;font-size:24px;letter-spacing:0.05em;color:#1a1a18}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{text-decoration:none;color:var(--text);font-size:17px;font-weight:600;transition:color 0.3s;cursor:pointer}
.nav-links a:hover{color:var(--text-light)}
.nav-cta{background:var(--bg-dark);color:var(--bg);font-weight:700;font-size:17px;padding:10px 22px;border-radius:100px;text-decoration:none;transition:transform 0.3s,box-shadow 0.3s;display:flex;align-items:center;gap:6px;cursor:pointer}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.15)}

/* PAGE */
.page{display:none}
.page.active{display:block;animation:pageIn 0.5s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 40px 80px;position:relative;overflow:hidden}
.hero-shape{position:absolute;opacity:0;animation:floatIn 1.2s ease forwards}
.shape-1{left:2%;top:12%;animation-delay:0.3s}.shape-2{right:3%;top:8%;animation-delay:0.5s}.shape-3{left:5%;bottom:15%;animation-delay:0.8s}.shape-4{right:8%;bottom:20%;animation-delay:1s}.shape-5{left:22%;top:5%;animation-delay:0.6s}.shape-6{right:20%;bottom:8%;animation-delay:1.2s}
@keyframes floatIn{0%{opacity:0;transform:scale(0.6) rotate(-15deg) translateY(40px)}100%{opacity:1;transform:scale(1) rotate(0deg) translateY(0)}}
.shape-1 svg{animation:drift1 8s ease-in-out infinite}.shape-2 svg{animation:drift2 10s ease-in-out infinite}.shape-3 svg{animation:drift3 9s ease-in-out infinite}.shape-4 svg{animation:drift1 11s ease-in-out infinite}.shape-5 svg{animation:drift2 7s ease-in-out infinite}.shape-6 svg{animation:drift3 12s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(4deg)}}
@keyframes drift2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-3deg)}}
@keyframes drift3{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}
.hero-greeting{font-family:'Caveat',cursive;font-size:26px;color:var(--text-light);margin-bottom:8px;opacity:0;animation:fadeUp 0.7s ease 0.4s forwards}
.hero h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(42px,7vw,80px);line-height:1.1;letter-spacing:-1px;margin-bottom:28px;opacity:0;animation:fadeUp 0.7s ease 0.6s forwards;position:relative;z-index:2}
.hero h1 em{font-style:italic}
.hero-desc{font-size:18px;color:var(--text-light);max-width:440px;line-height:1.7;margin:0 auto 36px;opacity:0;animation:fadeUp 0.7s ease 0.8s forwards;position:relative;z-index:2}
.hero-cta{display:inline-flex;align-items:center;gap:8px;background:var(--bg-dark);color:var(--bg);font-weight:700;font-size:16px;padding:14px 32px;border-radius:100px;text-decoration:none;opacity:0;animation:fadeUp 0.7s ease 1s forwards;transition:transform 0.3s,box-shadow 0.3s;position:relative;z-index:2;cursor:pointer}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.15)}

/* CAROUSEL */
.carousel-section{padding:60px 0 80px;overflow:hidden}
.carousel-label{text-align:center;margin-bottom:32px}
.carousel-label span{font-family:'Instrument Serif',serif;font-size:24px}
.carousel-track{display:flex;gap:20px;animation:cscroll 30s linear infinite;width:max-content}
.carousel-track:hover{animation-play-state:paused}
@keyframes cscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.carousel-item{flex-shrink:0;width:340px;height:240px;border-radius:14px;overflow:hidden;background:var(--bg-warm);cursor:pointer;position:relative}
.carousel-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.carousel-item:hover img{transform:scale(1.05)}
.carousel-item-overlay{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(transparent,rgba(0,0,0,0.6));color:white;font-weight:700;font-size:15px;opacity:0;transition:opacity 0.3s}
.carousel-item:hover .carousel-item-overlay{opacity:1}

/* HOME PROJECTS SECTION */
.projects-section{background:var(--bg-dark);padding:100px 40px 120px;border-radius:32px 32px 0 0;margin-top:-16px;position:relative;z-index:2}
.projects-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:64px;flex-wrap:wrap;gap:24px}
.projects-header-left{display:flex;align-items:baseline;gap:24px}
.projects-year{font-family:'Space Mono',monospace;font-size:12px;color:#555}
.projects-header h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:56px;color:var(--bg);letter-spacing:-1px}
.projects-header-desc{font-size:15px;color:#888;max-width:320px;line-height:1.7}
.projects-header-cta{display:inline-flex;align-items:center;gap:8px;background:white;color:var(--bg-dark);font-weight:700;font-size:14px;padding:12px 24px;border-radius:100px;text-decoration:none;transition:transform 0.3s;cursor:pointer;flex-shrink:0}
.projects-header-cta:hover{transform:translateY(-1px)}
.projects-header-cta svg{width:14px;height:14px}
.home-projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.project-card{background:#242422;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--bg);display:block;transition:transform 0.4s ease,box-shadow 0.4s ease;cursor:pointer}
.project-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.3)}
.project-card-img-wrapper{overflow:hidden;border-radius:12px;margin:12px 12px 0}
.project-card-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform 0.6s ease}
.project-card:hover .project-card-img{transform:scale(1.03)}
.project-card-info{padding:20px 24px 24px;display:flex;justify-content:space-between;align-items:flex-end}
.project-card-meta{display:flex;flex-direction:column;gap:4px}
.project-card-number{font-family:'Space Mono',monospace;font-size:11px;color:#555}
.project-card-title{font-weight:800;font-size:22px}
.project-card-desc{font-size:14px;color:#888;max-width:280px;line-height:1.5;margin-top:4px}
.project-card-year{font-family:'Space Mono',monospace;font-size:11px;color:#555}
.project-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.project-tag{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:0.5px;text-transform:uppercase;padding:4px 10px;background:#333;border-radius:4px;color:#999}

/* PROJECTS PAGE */
.projects-page{padding:120px 48px 80px;min-height:100vh}
.pp-header{margin-bottom:56px}
.pp-header-tag{font-family:'Space Mono',monospace;font-size:12px;color:var(--text-muted);letter-spacing:1px}
.pp-header h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:64px;letter-spacing:-1px;margin-top:4px}
.pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pp-card{background:#fff;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform 0.4s ease,box-shadow 0.4s ease}
.pp-card:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,0.08)}
.pp-card-img-wrapper{overflow:hidden;margin:10px 10px 0;border-radius:12px}
.pp-card-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform 0.6s ease}
.pp-card:hover .pp-card-img{transform:scale(1.04)}
.pp-card-info{padding:16px 18px 20px;display:flex;align-items:center;gap:8px}
.pp-card-num{font-family:'Space Mono',monospace;font-size:12px;color:var(--text-muted);flex-shrink:0}
.pp-card-title{font-weight:800;font-size:17px;flex-grow:1}
.pp-card-type{font-size:13px;color:var(--text-muted);text-align:right;flex-shrink:0}

/* INTERACTIVE RESUME SECTION */
.resume-section{padding:120px 40px;position:relative}
.resume-top{display:grid;grid-template-columns:320px 1fr;gap:80px;align-items:start;margin-bottom:80px}
.resume-photo-col{position:sticky;top:120px}
.resume-photo{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:20px;filter:contrast(1.05) saturate(0.9)}
.resume-photo-tag{display:inline-block;background:var(--bg-dark);color:var(--bg);font-family:'Caveat',cursive;font-size:18px;padding:10px 22px;border-radius:100px;margin-top:-20px;margin-left:20px;position:relative;z-index:2;transform:rotate(2deg)}
.resume-intro h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:42px;line-height:1.2;letter-spacing:-0.5px;margin-bottom:20px}
.resume-intro p{font-size:17px;line-height:1.8;color:var(--text-light);margin-bottom:16px}
.resume-quick-facts{display:flex;gap:32px;margin-top:32px;padding-top:28px;border-top:1px solid var(--border)}
.resume-fact{display:flex;flex-direction:column;gap:4px}
.resume-fact-label{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted)}
.resume-fact-value{font-weight:700;font-size:15px}

.resume-tabs{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap}
.resume-tab{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.5px;padding:10px 20px;border-radius:100px;border:1.5px solid var(--border);background:none;color:var(--text-light);cursor:pointer;transition:all 0.3s}
.resume-tab:hover{border-color:var(--text);color:var(--text)}
.resume-tab.active{background:var(--bg-dark);color:var(--bg);border-color:var(--bg-dark)}

.resume-panel{display:none;animation:fadeUp 0.4s ease}
.resume-panel.active{display:block}

.resume-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.resume-card{background:#fff;border-radius:14px;padding:28px;transition:transform 0.3s,box-shadow 0.3s;position:relative;overflow:hidden}
.resume-card:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,0.06)}
.resume-card-year{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-muted);margin-bottom:8px}
.resume-card-title{font-weight:800;font-size:16px;margin-bottom:4px}
.resume-card-org{font-size:14px;color:var(--accent);font-weight:600;margin-bottom:8px}
.resume-card-desc{font-size:14px;color:var(--text-light);line-height:1.6}
.resume-card-icon{position:absolute;top:20px;right:20px;width:36px;height:36px;background:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:center}
.resume-card-icon svg{width:16px;height:16px;stroke:var(--text-muted)}

.resume-interests{display:flex;flex-wrap:wrap;gap:10px}
.resume-interest{font-size:14px;font-weight:600;padding:12px 22px;border-radius:100px;background:#fff;color:var(--text);transition:all 0.3s;cursor:default}
.resume-interest:hover{background:var(--bg-dark);color:var(--bg);transform:translateY(-2px)}

/* ABOUT (keep for about page) */
.about-section{padding:120px 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-image-container{position:relative}
.about-image{width:100%;max-width:440px;aspect-ratio:3/4;object-fit:cover;border-radius:16px;display:block;filter:contrast(1.05) saturate(0.9)}
.about-image-tag{position:absolute;bottom:-16px;right:-16px;background:var(--bg-dark);color:var(--bg);font-family:'Caveat',cursive;font-size:18px;padding:12px 24px;border-radius:100px;transform:rotate(3deg)}
.about-content h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:42px;line-height:1.2;letter-spacing:-0.5px;margin-bottom:24px}
.about-content p{font-size:17px;line-height:1.8;color:var(--text-light);margin-bottom:16px}
.about-details{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px;padding-top:32px;border-top:1px solid var(--border)}
.about-detail-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.about-detail-value{font-weight:700;font-size:16px}

/* CONTACT */
.contact-section{padding:100px 40px;text-align:center;border-top:1px solid var(--border)}
.contact-section h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:52px;letter-spacing:-1px;margin-bottom:16px}
.contact-section p{font-size:17px;color:var(--text-light);margin-bottom:40px;max-width:440px;margin-left:auto;margin-right:auto;line-height:1.7}
.contact-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.contact-link{font-weight:700;font-size:15px;padding:14px 28px;border-radius:100px;text-decoration:none;border:1.5px solid var(--border);color:var(--text);transition:all 0.3s;cursor:pointer}
.contact-link:hover{background:var(--bg-dark);color:var(--bg);border-color:var(--bg-dark)}
.site-footer{padding:24px 40px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border)}
.site-footer span{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-muted)}

/* CASE STUDY */
.case-study{padding-top:80px}
.cs-hero{text-align:center;padding:60px 40px 0;background:var(--bg-warm);border-radius:0 0 32px 32px;overflow:hidden}
.cs-back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--text-light);text-decoration:none;cursor:pointer;margin-bottom:40px;transition:color 0.3s}
.cs-back:hover{color:var(--text)}
.cs-back svg{width:16px;height:16px}
.cs-hero h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(40px,6vw,72px);letter-spacing:-1px;margin-bottom:20px}
.cs-hero-desc{font-size:16px;color:var(--text-light);max-width:520px;margin:0 auto 48px;line-height:1.7}
.cs-hero-image{width:calc(100% - 80px);max-width:860px;margin:0 auto;border-radius:16px 16px 0 0;overflow:hidden}
.cs-hero-image img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.cs-meta{display:grid;grid-template-columns:1fr 1fr 1fr;max-width:860px;margin:32px auto 0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.cs-meta-item{padding:24px 32px;text-align:center;border-right:1px solid var(--border)}
.cs-meta-item:last-child{border-right:none}
.cs-meta-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.cs-meta-value{font-weight:700;font-size:16px}
.cs-content{max-width:860px;margin:0 auto;padding:0 40px}
.cs-section{padding:80px 0;display:grid;grid-template-columns:160px 1fr;gap:48px;border-bottom:1px solid var(--border)}
.cs-section:last-of-type{border-bottom:none}
.cs-section-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--text-muted);padding-top:8px}
.cs-section-body h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:32px;line-height:1.35;letter-spacing:-0.3px;margin-bottom:20px}
.cs-section-body p{font-size:16px;line-height:1.8;color:var(--text-light)}
.cs-project-btn-wrapper{text-align:center;padding:40px 0;max-width:860px;margin:0 auto}
.cs-project-btn{display:inline-flex;align-items:center;gap:10px;background:var(--bg-dark);color:var(--bg);font-weight:700;font-size:16px;padding:16px 32px;border-radius:100px;text-decoration:none;transition:transform 0.3s,box-shadow 0.3s}
.cs-project-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.15)}
.cs-project-btn .btn-dot{width:24px;height:24px;background:#333;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cs-project-btn .btn-dot svg{width:12px;height:12px}
.cs-results{max-width:860px;margin:0 auto;padding:60px 40px 80px}
.cs-results-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--text-muted);margin-bottom:32px}
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cs-stat-number{font-family:'Instrument Serif',serif;font-size:56px;font-weight:400;letter-spacing:-1px;line-height:1;margin-bottom:4px}
.cs-stat-label{font-size:16px;font-weight:700;color:var(--text-light)}
.cs-gallery{max-width:860px;margin:0 auto;padding:0 40px 40px}
.cs-gallery-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--text-muted);margin-bottom:20px}
.cs-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cs-gallery-grid img{width:100%;border-radius:12px;object-fit:cover;aspect-ratio:16/10}
.cs-gallery-grid .cs-gallery-wide{grid-column:1/-1}
.cs-persona{background:#fff;border-radius:16px;padding:32px;margin-top:24px}
.cs-persona-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cs-persona-avatar{width:48px;height:48px;background:var(--bg-warm);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:22px}
.cs-persona-name{font-weight:800;font-size:17px}
.cs-persona-role{font-size:13px;color:var(--text-light)}
.cs-persona p{font-size:15px;line-height:1.7;color:var(--text-light)}
.cs-pain-points{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.cs-pain-point{background:#fff;border-radius:12px;padding:20px}
.cs-pain-point h4{font-weight:700;font-size:15px;margin-bottom:6px}
.cs-pain-point p{font-size:14px;color:var(--text-light);line-height:1.6}
video.project-card-img,video.pp-card-img,video.carousel-video{width:100%;height:100%;object-fit:cover}
.smart-contain{object-fit:contain !important;background:#f0ede7}
.projects-section .smart-contain{background:#2a2a28}

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

/* ABOUT PAGE */
.about-page{padding:120px 48px 80px;min-height:100vh}
.ap-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:100px}
.ap-hero-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:20px;filter:contrast(1.05) saturate(0.9)}
.ap-hero-content h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:52px;line-height:1.15;letter-spacing:-1px;margin-bottom:24px}
.ap-hero-content h1 em{font-style:italic}
.ap-hero-content .ap-intro{font-size:18px;line-height:1.8;color:var(--text-light);margin-bottom:32px}
.ap-hero-tag{font-family:'Caveat',cursive;font-size:20px;color:var(--accent)}
.ap-section{padding:80px 0;border-top:1px solid var(--border)}
.ap-section-inner{display:grid;grid-template-columns:200px 1fr;gap:48px}
.ap-section-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);padding-top:6px}
.ap-section-body h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:36px;letter-spacing:-0.5px;margin-bottom:20px}
.ap-section-body p{font-size:17px;line-height:1.8;color:var(--text-light);margin-bottom:16px}
.ap-skills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ap-skill{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.5px;padding:8px 16px;border:1px solid var(--border);border-radius:100px;color:var(--text-light)}
.ap-values{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:8px}
.ap-value h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:24px;margin-bottom:8px}
.ap-value p{font-size:15px;line-height:1.7;color:var(--text-light)}
.ap-timeline{display:flex;flex-direction:column;gap:24px;margin-top:8px}
.ap-timeline-item{display:grid;grid-template-columns:80px 1fr;gap:20px;align-items:baseline}
.ap-timeline-year{font-family:'Space Mono',monospace;font-size:12px;color:var(--text-muted)}
.ap-timeline-title{font-weight:700;font-size:17px;margin-bottom:2px}
.ap-timeline-desc{font-size:14px;color:var(--text-light)}
.ap-cta-banner{background:var(--bg-dark);border-radius:20px;padding:64px;text-align:center;margin-top:80px}
.ap-cta-banner h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:42px;color:var(--bg);margin-bottom:16px}
.ap-cta-banner p{font-size:16px;color:#888;margin-bottom:32px;max-width:400px;margin-left:auto;margin-right:auto;line-height:1.7}
.ap-cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--bg);color:var(--bg-dark);font-weight:700;font-size:16px;padding:14px 32px;border-radius:100px;text-decoration:none;cursor:pointer;transition:transform 0.3s}
.ap-cta-btn:hover{transform:translateY(-2px)}

/* CONTACT PAGE */
.contact-page{padding:120px 48px 80px;min-height:100vh;display:flex;flex-direction:column;align-items:center}
.cp-header{text-align:center;margin-bottom:72px;max-width:560px}
.cp-header-tag{font-family:'Caveat',cursive;font-size:24px;color:var(--accent);margin-bottom:8px}
.cp-header h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:56px;letter-spacing:-1px;margin-bottom:16px}
.cp-header p{font-size:18px;color:var(--text-light);line-height:1.7}
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;max-width:800px;margin-bottom:80px}
.cp-card{background:#fff;border-radius:16px;padding:36px;text-align:center;transition:transform 0.3s,box-shadow 0.3s}
.cp-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.06)}
.cp-card-icon{width:48px;height:48px;background:var(--bg-warm);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cp-card-icon svg{width:22px;height:22px}
.cp-card h3{font-weight:800;font-size:18px;margin-bottom:6px}
.cp-card p{font-size:14px;color:var(--text-light);margin-bottom:16px;line-height:1.6}
.cp-card a{font-weight:700;font-size:14px;color:var(--accent);text-decoration:none;transition:opacity 0.3s}
.cp-card a:hover{opacity:0.7}
.cp-socials{display:flex;gap:16px;margin-bottom:80px}
.cp-social{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all 0.3s;text-decoration:none;color:var(--text)}
.cp-social:hover{background:var(--bg-dark);border-color:var(--bg-dark);color:var(--bg)}
.cp-social svg{width:20px;height:20px}
.cp-form{background:#fff;border-radius:20px;padding:48px;width:100%;max-width:560px}
.cp-form h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:32px;margin-bottom:8px;text-align:center}
.cp-form .cp-form-sub{font-size:15px;color:var(--text-light);text-align:center;margin-bottom:32px}
.cp-field{margin-bottom:20px}
.cp-field label{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.cp-field input,.cp-field textarea,.cp-field select{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:10px;font-family:'Darker Grotesque',sans-serif;font-size:16px;font-weight:500;background:var(--bg);color:var(--text);outline:none;transition:border-color 0.3s;resize:vertical}
.cp-field input:focus,.cp-field textarea:focus,.cp-field select:focus{border-color:var(--text)}
.cp-field textarea{min-height:120px}
.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cp-submit{width:100%;padding:16px;background:var(--bg-dark);color:var(--bg);font-family:'Darker Grotesque',sans-serif;font-weight:700;font-size:16px;border:none;border-radius:100px;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s;margin-top:8px}
.cp-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}

.nav-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:4px}
.nav-menu-btn svg{width:24px;height:24px}
.mobile-menu{display:none;position:fixed;top:62px;left:0;right:0;background:rgba(246,243,238,0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:16px 24px;z-index:999;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{text-decoration:none;color:var(--text);font-size:17px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;display:block}
.mobile-menu a:last-child{border-bottom:none}

/* RESPONSIVE */
@media(max-width:700px){
nav{padding:14px 20px}.nav-links{display:none}.nav-cta{display:none}.nav-menu-btn{display:block}
.hero{padding:120px 24px 60px}.hero-shape{display:none}
.carousel-item{width:260px;height:180px}.projects-section{padding:60px 20px 80px;border-radius:20px 20px 0 0}
.home-projects-grid{grid-template-columns:1fr}.projects-header{flex-direction:column}.projects-header h2{font-size:40px}
.about-section{grid-template-columns:1fr;padding:80px 24px;gap:48px}.about-image{max-width:100%}
.resume-section{padding:80px 20px}.resume-top{grid-template-columns:1fr;gap:32px}.resume-photo-col{position:static}
.resume-photo{max-width:280px}.resume-cards{grid-template-columns:1fr}.resume-quick-facts{flex-wrap:wrap;gap:20px}
.contact-section{padding:80px 24px}.site-footer{padding:20px 24px}
.pp-grid{grid-template-columns:1fr}.pp-header h1{font-size:42px}.projects-page{padding:100px 20px 60px}
.cs-hero{padding:40px 20px 0}.cs-hero-image{width:calc(100% - 40px)}.cs-meta{grid-template-columns:1fr}
.cs-meta-item{border-right:none;border-bottom:1px solid var(--border)}.cs-meta-item:last-child{border-bottom:none}
.cs-section{grid-template-columns:1fr;gap:16px}.cs-content{padding:0 20px}.cs-stats{grid-template-columns:1fr}
.cs-results{padding:40px 20px 60px}.cs-gallery{padding:0 20px 40px}.cs-gallery-grid{grid-template-columns:1fr}.cs-pain-points{grid-template-columns:1fr}
.ap-hero{grid-template-columns:1fr;gap:32px}.ap-hero-content h1{font-size:36px}
.ap-section-inner{grid-template-columns:1fr;gap:16px}.ap-values{grid-template-columns:1fr}
.about-page{padding:100px 20px 60px}
.contact-page{padding:100px 20px 60px}.cp-grid{grid-template-columns:1fr}.cp-row{grid-template-columns:1fr}
.cp-form{padding:32px 24px}.cp-header h1{font-size:40px}
}
@media(max-width:1100px) and (min-width:901px){.pp-grid{grid-template-columns:repeat(2,1fr)}}