*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:"DM Sans",sans-serif;background:#211f1c;color:#f9f3ed;line-height:1.6;overflow-x:hidden}a{text-decoration:none;color:inherit}.container{width:min(1120px,calc(100% - 48px));margin:auto}.progress{position:fixed;top:0;left:0;height:3px;background:#d96a36;width:0;z-index:200}.header{position:sticky;top:0;z-index:100;background:#211f1c;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:31px;font-weight:800;letter-spacing:-1px}.brand span{color:#d96a36}.nav-links{display:flex;gap:30px;font-size:14px}.nav-links a{padding:7px 0;color:#eee;position:relative}.nav-links a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#d96a36;transition:.25s}.nav-links a:hover:after,.nav-links a.active:after{width:100%}.talk{border:1px solid #d96a36;color:#fff;border-radius:999px;padding:11px 16px;font-size:12px;font-weight:800}.talk b{color:#d96a36}.menu{display:none;background:none;color:#fff;border:0;font-size:25px}.hero{background:#211f1c;color:#fff;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-120px;top:-150px;background:radial-gradient(circle,rgba(217,106,54,.34),rgba(217,106,54,0) 68%)}.hero-grid{min-height:690px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:70px;padding:78px 0}.eyebrow,.section-title>span{font-size:16px;letter-spacing:2.4px;font-weight:900;color:#d96a36}.hero h1{font-size:clamp(58px,5.8vw,78px);line-height:.96;letter-spacing:-3.5px;max-width:780px;margin:10px 0 18px}.hero h1 em,.contact h2 em{font-family:"Playfair Display",serif;color:#e68955;font-style:italic;font-weight:600}.typed-wrap{font-size:22px;font-weight:700;color:#e68955;min-height:34px}.caret{animation:blink 1s infinite}.hero-note{color:#bcb4ad;font-size:16px;line-height:1.8;max-width:640px;margin-top:15px}.hero-buttons{display:flex;gap:11px;margin-top:28px;flex-wrap:wrap}.btn{padding:13px 20px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid #d96a36;transition:.25s}.btn.orange{background:#d96a36;color:#211f1c}.btn.outline{color:#fff;border-color:#6d645e}.btn:hover{transform:translateY(-3px)}.hero-photo{position:relative;display:flex;justify-content:center}.photo-frame{width:min(325px,100%);aspect-ratio:1;border-radius:50%;padding:7px;background:#2b2926;border:1px solid rgba(217,106,54,.6);position:relative;z-index:2}.photo-frame img{width:100%;height:100%;border-radius:50%;object-fit:cover}.photo-orbit{position:absolute;inset:-14px;border:1px solid rgba(217,106,54,.42);border-radius:50%;animation:spin 18s linear infinite}.photo-orbit:before{content:"";position:absolute;right:12%;top:6%;width:10px;height:10px;border-radius:50%;background:#d96a36}.section{padding:92px 0}.about{background:#211f1c;color:#f9f3ed}.about .section-title{margin-bottom:40px}.two-col{display:block}.section-title h2{font-size:clamp(40px,3.5vw,50px);letter-spacing:-2.5px;line-height:1;margin-top:10px;color:#f9f3ed}.about .section-title,.projects .section-title{display:block}.about-content{display:grid;grid-template-columns:260px 1fr;gap:52px;align-items:center}.about-photo{width:220px;height:285px;object-fit:cover;border-radius:24px}.about-content p{font-size:20px;line-height:1.85;color:#bcb4ad;max-width:680px}.skills{background:#211f1c;color:#f9f3ed}.section-title.center{text-align:center}.skill-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}.skill-group{padding:25px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:#2b2926}.skill-group h3{text-transform:uppercase;letter-spacing:1.5px;font-size:12px;margin-bottom:18px;color:#e68955}.skill-list{display:flex;flex-wrap:wrap;gap:9px}.skill-list span{background:#3a3733;color:#f9f3ed;padding:8px 12px;border-radius:999px;font-size:11px;border:1px solid rgba(255,255,255,.06)}.projects{background:#211f1c;color:#f9f3ed}.projects .section-title>span{color:#e68955}.projects .section-title h2{color:#fff}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:50px}.project-card{background:#2b2926;border:1px solid rgba(255,255,255,.09);border-radius:22px;overflow:hidden;transition:.3s}.project-card:hover{transform:translateY(-6px);border-color:rgba(217,106,54,.55)}.project-image{height:190px;background:#2b2926;padding:20px;display:flex;align-items:center;justify-content:center}.project-window{width:82%;height:100%;background:#211f1c;border-radius:13px;padding:14px;border:1px solid rgba(33,31,28,.12)}.window-top{display:flex;gap:5px;margin-bottom:18px}.window-top i{width:6px;height:6px;background:#dcd3cc;border-radius:50%;opacity:.45}.window-line{height:8px;border-radius:8px;background:#3a3733;margin:9px 0;width:78%}.window-line.accent{width:48%;background:#d96a36}.window-line.short{width:58%}.window-block{height:60px;border-radius:10px;background:#2b2926;margin-top:14px;position:relative}.window-block:after{content:"";position:absolute;left:20%;right:20%;top:23px;height:9px;border-radius:9px;background:#d96a36}.project-body{padding:21px}.project-number{font-size:10px;letter-spacing:2px;font-weight:900;color:#e68955}.project-body h3{font-size:21px;margin:6px 0 12px;letter-spacing:-.5px;color:#fff}.project-tags{display:flex;flex-wrap:wrap;gap:7px}.project-tags span{font-size:10px;padding:6px 8px;border-radius:999px;background:#3a3733;color:#dcd3cc}.project-body>a{display:inline-block;margin-top:18px;color:#e68955;font-size:11px;font-weight:800;border-bottom:1px solid #e68955;padding-bottom:2px}.contact{background:#211f1c;color:#f9f3ed;text-align:center;padding:58px 0 48px;position:relative;overflow:hidden}.contact:before{content:"";position:absolute;inset:auto -180px -240px auto;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(217,106,54,.18),rgba(217,106,54,0) 68%);pointer-events:none}.contact-inner{max-width:850px}.contact-kicker{font-size:11px;letter-spacing:2.4px;font-weight:900;color:#e68955}.contact h2{font-size:clamp(40px,4vw,52px);letter-spacing:-2.5px;line-height:1;margin:12px 0 15px;color:#f9f3ed}.contact p{font-size:14px;color:#bcb4ad;max-width:650px;margin:0 auto}.contact-links{display:flex;justify-content:center;gap:18px;margin-top:26px;flex-wrap:wrap}.contact-links a{font-size:12px;font-weight:800;border-bottom:1px solid #6d645e;padding-bottom:5px;color:#f9f3ed}.contact-links b{color:#e68955;margin-left:4px}.footer{background:#211f1c;color:#aaa;padding:26px 0 24px;margin-top:12px;display:flex;justify-content:center;align-items:center;text-align:center;font-size:11px;letter-spacing:.15px;margin-top:12px}.reveal{opacity:0;transform:translateY(20px);transition:.7s ease}.reveal.show{opacity:1;transform:none}@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:820px){.container{width:min(100% - 30px,1120px)}.nav{min-height:72px}.nav-links,.talk{display:none}.menu{display:block}.nav-links.open{display:flex;position:absolute;left:0;right:0;top:72px;background:#211f1c;padding:18px 22px;flex-direction:column;border-top:1px solid rgba(255,255,255,.08)}.hero-grid{grid-template-columns:1fr;text-align:center;gap:40px;min-height:auto;padding:68px 0 74px}.hero-photo{order:-1}.photo-frame{width:210px}.photo-orbit{inset:-10px}.hero h1{font-size:48px}.hero-note{margin-inline:auto}.hero-buttons{justify-content:center}.two-col{display:block}.about-content{grid-template-columns:1fr;gap:28px}.about-content{grid-template-columns:1fr;text-align:center}.about-photo{margin:auto}.about-content p{font-size:17px;margin:auto}.skill-groups,.project-grid{grid-template-columns:1fr}.section{padding:72px 0}.project-image{height:175px}.contact{padding:62px 0 50px}.footer{gap:12px;flex-direction:column}}@media(max-width:500px){.brand{font-size:23px}.hero h1{font-size:40px;letter-spacing:-2.2px}.hero-note{font-size:14px}.section-title h2{font-size:42px}.project-body h3{font-size:19px}}

.section-title.center{text-align:center}.section-subtitle{margin-top:10px;color:#e68955;font-family:"Playfair Display",serif;font-style:italic;font-size:22px}.about-content{display:block;text-align:center;max-width:820px;margin:0 auto}.about-content p{margin:0 auto;font-size:19px;line-height:1.9;color:#bcb4ad}.projects .section-title,.skills .section-title{margin-bottom:0}.projects .project-grid{margin-top:44px}.project-image{padding:0;height:220px;background:#2b2926;overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}.project-card:hover .project-image img{transform:scale(1.035)}.contact-links{gap:14px}.contact-links a{display:inline-flex;align-items:center;gap:10px;min-width:150px;justify-content:center}.contact-icon{width:31px;height:31px;border:1px solid rgba(217,106,54,.45);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#e68955}.contact-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.contact-icon svg path{fill:none}.footer{border-top:1px solid rgba(255,255,255,.06)}
@media(max-width:820px){.section-subtitle{font-size:19px}.project-image{height:190px}.about-content p{font-size:17px}.eyebrow,.section-title>span{font-size:14px}.hero h1{font-size:48px}.section-title h2{font-size:40px}.contact{padding:50px 0 40px}}

/* === FINAL TYPOGRAPHY / SPACING OVERRIDES === */
/* Keep the approved dark layout; only adjust the requested sizes and positions. */
.eyebrow,
.section-title > span{font-size:15px;line-height:1.2;letter-spacing:2.6px}

.hero .eyebrow{font-size:18px;letter-spacing:2.8px;margin-bottom:16px}

.hero-grid{padding-top:70px;padding-bottom:68px}
.hero h1{font-size:clamp(54px,5.2vw,72px);line-height:.98;margin-top:6px;margin-bottom:18px}

.section{padding:82px 0}

.section-title h2{font-size:clamp(34px,3.25vw,42px);line-height:1.05;letter-spacing:-1.7px;margin-top:8px}
.section-title.center{margin-bottom:34px}

.about .section-title h2,
.skills .section-title h2,
.projects .section-title h2{font-size:clamp(34px,3.3vw,43px)}

.typed-wrap{font-size:20px;min-height:30px}
.hero-note{font-size:15px;line-height:1.8}

.about-content{max-width:780px}
.about-content p{font-size:17px;line-height:1.85}

.skill-groups{margin-top:38px}
.skill-group{padding:22px}

.project-grid{margin-top:38px;gap:18px}
.project-image{height:205px}
.project-body{padding:19px}
.project-body h3{font-size:19px}

.contact{padding:44px 0 34px}
.contact-inner{transform:translateY(-38px)}
.contact h2{font-size:clamp(38px,3.6vw,46px);margin:10px 0 12px}
.contact p{font-size:13px}
.contact-links{margin-top:22px}
.footer{margin-top:24px;padding:22px 0 22px}

@media(max-width:820px){
  .hero-grid{padding-top:56px;padding-bottom:60px}
  .hero .eyebrow{font-size:15px}
  .hero h1{font-size:46px}
  .section{padding:68px 0}
  .section-title h2,
  .about .section-title h2,
  .skills .section-title h2,
  .projects .section-title h2{font-size:36px}
  .eyebrow,.section-title>span{font-size:13px}
  .contact{padding:44px 0 30px}
  .contact-inner{transform:none}
}
@media(max-width:500px){
  .hero .eyebrow{font-size:13px}
  .hero h1{font-size:40px}
  .section-title h2,
  .about .section-title h2,
  .skills .section-title h2,
  .projects .section-title h2{font-size:31px}
}

/* === MULTI-PAGE LAYOUT === */
.page-main{min-height:calc(100vh - 82px)}
.page-hero{padding:72px 0 55px;text-align:center}
.page-hero .eyebrow{margin-bottom:12px}
.page-hero h1{font-size:clamp(38px,4vw,52px);line-height:1.05;letter-spacing:-2px;margin:0;color:#f9f3ed}
.page-hero h1 em{font-family:"Playfair Display",serif;color:#e68955;font-style:italic}
.page-copy{max-width:760px;margin:28px auto 0;text-align:center;color:#bcb4ad;font-size:16px;line-height:1.9}
.page-section{padding:20px 0 82px}
.about-page .about-content{max-width:820px}
.skills-page .skill-groups{margin-top:18px}
.projects-page .project-grid{margin-top:18px}
.contact-page{min-height:calc(100vh - 130px);display:flex;align-items:flex-start;padding:70px 0 45px}
.contact-page .contact{padding:0;width:100%}
.contact-page .contact-inner{transform:none}
.site-footer{margin-top:0}
.nav-links a.active{color:#fff}
@media(max-width:820px){.page-hero{padding:55px 0 35px}.page-copy{font-size:15px}.contact-page{padding:55px 0 35px;min-height:auto}}
/* ONE-PAGE FLOW: sections remain on one scrollable document */
html{scroll-behavior:smooth;scroll-padding-top:82px}
.page-main{min-height:0}
.page-main>section{width:100%}
#about,#skills,#projects,#contact{scroll-margin-top:82px}
.about .section,.skills .section,.projects .section{min-height:560px;display:flex;align-items:center}
.projects .section{display:block}
.contact-section{background:#211f1c}
.contact-section .contact{min-height:460px;display:flex;align-items:center}
.site-footer{margin-top:20px}
@media(max-width:820px){.about .section,.skills .section,.projects .section{min-height:0}.contact-section .contact{min-height:380px}}

/* Final requested layout adjustments: About image beside text; contact/footer balance. */
.about-content{display:grid;grid-template-columns:260px minmax(0,1fr);gap:54px;align-items:center;max-width:900px;margin:0 auto;text-align:left}
.about-photo{width:240px;height:300px;object-fit:cover;border-radius:24px;margin:0}
.about-content p{margin:0;max-width:620px;text-align:left;font-size:17px;line-height:1.85}
.contact{padding:48px 0 38px}
.contact-inner{max-width:850px;transform:translateY(-24px)}
.footer{margin-top:10px;padding:22px 0 20px}
@media(max-width:820px){
  .about-content{grid-template-columns:1fr;gap:28px;max-width:780px;text-align:center}
  .about-photo{width:210px;height:270px;margin:0 auto}
  .about-content p{max-width:680px;text-align:center;margin:0 auto;font-size:17px}
  .contact-inner{transform:none}
  .contact{padding:50px 0 38px}
  .footer{margin-top:8px}
}


/* FINAL REQUESTED POLISH: slightly fuller About copy + centered Contact with hero-style orange fade. */
.about-content{grid-template-columns:260px minmax(0,1fr);gap:54px;align-items:center;max-width:900px;margin:0 auto}
.about-text{display:grid;gap:14px}
.about-text p{margin:0;max-width:620px;text-align:left;font-size:17px;line-height:1.88;color:#bcb4ad}
.contact-section{position:relative;overflow:hidden;background:#211f1c}
.contact-section::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;right:-150px;top:-170px;background:radial-gradient(circle,rgba(217,106,54,.30) 0%,rgba(217,106,54,.12) 36%,rgba(217,106,54,0) 70%);pointer-events:none}
.contact-section::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;left:-170px;bottom:-160px;background:radial-gradient(circle,rgba(217,106,54,.10),rgba(217,106,54,0) 72%);pointer-events:none}
.contact-section .contact{position:relative;z-index:1;min-height:500px;display:flex;align-items:center;justify-content:center;padding:45px 0 35px}
.contact-section .contact-inner{width:100%;max-width:850px;transform:translateY(-18px)}
.site-footer{position:relative;z-index:2;margin-top:8px;padding:22px 0 22px;background:#211f1c;border-top:1px solid rgba(255,255,255,.06);text-align:center}
@media(max-width:820px){.about-content{grid-template-columns:1fr;gap:28px;max-width:780px;text-align:center}.about-photo{margin:0 auto}.about-text p{text-align:center;margin:0 auto;font-size:17px}.contact-section .contact{min-height:420px;padding:42px 0 32px}.contact-section .contact-inner{transform:none}.site-footer{margin-top:8px}}

/* Hero social links: added below the primary buttons only. */
.hero-socials{display:flex;gap:18px;align-items:center;margin-top:22px}
.hero-social{width:62px;height:62px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#2a2930;border:1px solid rgba(255,255,255,.11);color:#f9f3ed;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.hero-social:hover{transform:translateY(-3px);border-color:rgba(217,106,54,.7);background:#302d2a}
.hero-social svg{width:25px;height:25px;fill:currentColor}
.hero-social:nth-child(3) svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){.hero-socials{justify-content:center;margin-top:20px}.hero-social{width:58px;height:58px}}

/* ===== FINAL POLISH ===== */
.brand-first{color:#fff}
.brand-last{color:#fff}
.brand-dot{color:#d96a36}

/* Hero social icons: warm white/yellow tone with restrained orange interaction. */
.hero-social{
  color:#f4e7b8;
  background:#2a2926;
  border-color:rgba(244,231,184,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}
.hero-social:hover{
  color:#fff7dc;
  background:#312e29;
  border-color:rgba(217,106,54,.75);
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
.hero-social svg{filter:drop-shadow(0 0 3px rgba(244,231,184,.10))}

/* Let's Talk: subtle lift + glow to clearly signal that it is interactive. */
.talk{transition:transform .25s ease,background .25s ease,box-shadow .25s ease,border-color .25s ease}
.talk:hover,
.talk:focus-visible{
  transform:translateY(-3px);
  background:rgba(217,106,54,.12);
  border-color:#e68955;
  box-shadow:0 10px 28px rgba(217,106,54,.16);
  outline:none;
}
.talk b{transition:transform .25s ease}
.talk:hover b,.talk:focus-visible b{transform:translate(2px,-2px)}

/* Skills: polished hover feedback without changing the layout. */
.skill-group{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.skill-group:hover{
  transform:translateY(-4px);
  border-color:rgba(217,106,54,.38);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.skill-list span{
  transition:color .22s ease,background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.skill-list span:hover{
  color:#fff7dc;
  background:linear-gradient(135deg,#3b3732,#4a4038);
  border-color:rgba(217,106,54,.48);
  transform:translateY(-2px);
  box-shadow:0 7px 16px rgba(0,0,0,.18);
}

/* Footer type is slightly stronger for readability. */
.footer{font-size:13px}

@media(max-width:820px){
  .hero-social{color:#f4e7b8}
  .footer{font-size:12px}
}

/* FINAL POLISH — requested brand, hover, glow and consistency updates */
.brand-first{color:#fff !important}
.brand-last{color:#d96a36 !important}
.brand-dot{color:#d96a36 !important}

/* Hero social icons: warm white by default, orange on hover/focus. */
.hero-social{
  color:#f6f0e9;
  background:#2a2926;
  border:1px solid rgba(246,240,233,.16);
  transition:color .24s ease, background .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}
.hero-social:hover,
.hero-social:focus-visible{
  color:#d96a36;
  background:#332c27;
  border-color:#d96a36;
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(217,106,54,.16);
  outline:none;
}
.hero-social svg{transition:transform .24s ease, filter .24s ease}
.hero-social:hover svg,.hero-social:focus-visible svg{transform:scale(1.08);filter:drop-shadow(0 0 4px rgba(217,106,54,.25))}

/* Let's Talk should visibly respond to the pointer/focus. */
.talk{
  transition:transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.talk:hover,.talk:focus-visible{
  transform:translateY(-3px);
  background:rgba(217,106,54,.12);
  border-color:#e68955;
  box-shadow:0 9px 24px rgba(217,106,54,.14);
  outline:none;
}
.talk b{display:inline-block;transition:transform .24s ease}
.talk:hover b,.talk:focus-visible b{transform:translate(2px,-2px)}

/* A restrained orange glow appears in several sections, echoing the hero's top-right glow. */
.about,.skills,.projects{position:relative;overflow:hidden}
.about::before,.skills::after,.projects::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(217,106,54,.11) 0%,rgba(217,106,54,.045) 34%,rgba(217,106,54,0) 71%);
}
.about::before{right:-220px;top:-190px}
.skills::after{left:-220px;bottom:-210px}
.projects::before{right:-220px;bottom:-210px}
.about>.section,.skills>.section,.projects>.section{position:relative;z-index:1}

/* Subtle section entrance polish. */
.reveal{transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion: reduce){
  .photo-orbit{animation:none}
  .hero-social,.talk,.skill-group,.skill-list span,.project-card,.project-image img{transition:none !important}
}

/* ===== FINAL HOVER POLISH: images, skills, projects and contact icons ===== */

/* Hero + About images: subtle color shift and lift on hover. */
.photo-frame{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.photo-frame img{
  transition:filter .35s ease, transform .45s ease;
}
.photo-frame:hover{
  transform:translateY(-4px);
  border-color:#d96a36;
  box-shadow:0 16px 34px rgba(217,106,54,.16);
}
.photo-frame:hover img{
  transform:scale(1.025);
  filter:saturate(1.18) sepia(.08);
}
.about-photo{
  transition:transform .35s ease, filter .35s ease, box-shadow .35s ease, outline-color .35s ease;
  outline:1px solid transparent;
  outline-offset:3px;
}
.about-content .about-photo:hover{
  transform:translateY(-4px) scale(1.015);
  filter:saturate(1.16) sepia(.08);
  outline-color:rgba(217,106,54,.65);
  box-shadow:0 16px 32px rgba(0,0,0,.22);
}

/* Skill groups and individual skills react to the pointer. */
.skill-group{
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.skill-group:hover{
  transform:translateY(-5px);
  border-color:rgba(217,106,54,.5);
  background:linear-gradient(145deg,#2d2b28,#302c29);
  box-shadow:0 16px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
}
.skill-list span{
  position:relative;
  transition:color .24s ease, background .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}
.skill-list span:hover{
  color:#f7e9d8;
  background:linear-gradient(135deg,#46362d,#5a3d2d);
  border-color:#d96a36;
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(217,106,54,.15);
}

/* Project cards + thumbnails: stronger but still professional interaction. */
.project-card{
  transition:transform .32s cubic-bezier(.16,1,.3,1), border-color .32s ease, box-shadow .32s ease;
}
.project-card:hover{
  transform:translateY(-8px);
  border-color:rgba(217,106,54,.7);
  box-shadow:0 20px 46px rgba(0,0,0,.25), 0 0 0 1px rgba(217,106,54,.08);
}
.project-image{
  position:relative;
}
.project-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(217,106,54,.34),rgba(217,106,54,.08) 48%,transparent 78%);
  opacity:0;
  transition:opacity .32s ease;
  pointer-events:none;
}
.project-card:hover .project-image::after{
  opacity:1;
}
.project-image img{
  transition:transform .5s cubic-bezier(.16,1,.3,1), filter .42s ease;
}
.project-card:hover .project-image img{
  transform:scale(1.055);
  filter:saturate(1.3) sepia(.12) contrast(1.03);
}

/* Contact icons/links: warm white by default, orange on hover. */
.contact-links a{
  transition:color .24s ease, border-color .24s ease, transform .24s ease;
}
.contact-links a:hover,
.contact-links a:focus-visible{
  color:#f2dccd;
  border-color:#d96a36;
  transform:translateY(-3px);
  outline:none;
}
.contact-icon{
  transition:color .24s ease, background .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}
.contact-links a:hover .contact-icon,
.contact-links a:focus-visible .contact-icon{
  color:#d96a36;
  background:rgba(217,106,54,.09);
  border-color:#d96a36;
  transform:scale(1.07);
  box-shadow:0 7px 16px rgba(217,106,54,.12);
}
.contact-links b{
  transition:color .24s ease, transform .24s ease;
}
.contact-links a:hover b,
.contact-links a:focus-visible b{
  color:#f0a273;
  transform:translate(2px,-2px);
}

@media (prefers-reduced-motion: reduce){
  .photo-frame,.photo-frame img,.about-photo,.skill-group,.skill-list span,.project-card,.project-image::after,.project-image img,.contact-links a,.contact-icon,.contact-links b{
    transition:none !important;
  }
}

/* Final brand cleanup: Niha stays white; Hawas is orange; no trailing dot. */
.brand-first{color:#fff !important}.brand-last{color:#d96a36 !important}.brand-dot{display:none !important}

/* Final project-section presentation: 3 columns, image + description + GitHub/Live */
.projects .project-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;align-items:stretch}
.projects .project-card{display:flex;flex-direction:column;min-width:0}
.projects .project-image{height:185px;padding:0;background:#2b2926;overflow:hidden}
.projects .project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .35s ease}
.projects .project-card:hover .project-image img{transform:scale(1.055);filter:saturate(1.12) sepia(.08)}
.projects .project-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 19px}
.projects .project-body h3{font-size:18px;line-height:1.3;margin:0 0 10px;color:#fff}
.projects .project-body p{font-size:12.5px;line-height:1.7;color:#bcb4ad;margin:0;min-height:84px}
.projects .project-tags,.projects .project-number{display:none}
.projects .project-links{display:flex;align-items:center;gap:18px;margin-top:auto;padding-top:17px}
.projects .project-links a,.projects .live-link{display:inline-flex;align-items:center;gap:7px;color:#e68955;font-size:11px;font-weight:800;text-decoration:none;border-bottom:1px solid rgba(230,137,85,.45);padding-bottom:3px}
.projects .project-links a:hover{gap:9px;border-color:#e68955}
.projects .live-link.is-disabled{opacity:.7;cursor:default}
.projects .mini-icon{width:20px;height:20px;border:1px solid rgba(217,106,54,.55);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#e68955;font-size:10px;line-height:1}
.projects .project-card:hover .mini-icon{border-color:#e68955;color:#f0a071}
@media(max-width:1000px){.projects .project-grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.projects .project-grid-three{grid-template-columns:1fr}.projects .project-image{height:200px}.projects .project-body p{min-height:auto}.projects .project-links{margin-top:18px}}

.projects .mini-icon svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.projects .github-icon svg path{fill:currentColor;stroke:none}.projects .live-link{cursor:default}.projects .project-links a{cursor:pointer}

/* Final project presentation: image-led, real-project feel */
.project-image{height:205px;overflow:hidden;background:#242321;position:relative}
.project-visual{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#f4f0e8}
.project-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(229,111,57,.20),transparent 38%),linear-gradient(135deg,#2a2724,#211f1c)}
.project-visual:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;border:1px solid rgba(229,111,57,.20);right:-70px;top:-100px}
.project-visual svg{width:108px;height:108px;position:relative;z-index:1;color:#e56f39;transition:transform .45s ease,color .3s,filter .3s}
.project-visual span{position:absolute;left:18px;bottom:16px;z-index:1;font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#8f8a84}
.project-card:hover .project-visual svg,.project-card:focus-visible .project-visual svg{transform:scale(1.08);color:#f29a66;filter:drop-shadow(0 0 10px rgba(229,111,57,.25))}
.project-card:hover .project-visual:before,.project-card:focus-visible .project-visual:before{background:radial-gradient(circle at 78% 20%,rgba(229,111,57,.32),transparent 42%),linear-gradient(135deg,#302b27,#211f1c)}
.project-card:focus-visible{outline:2px solid #e56f39;outline-offset:3px}
.project-body{min-height:195px}
.project-body p{max-width:34rem}
.project-links{margin-top:20px}
@media(max-width:1060px){.project-grid-three{grid-template-columns:1fr 1fr!important}}
@media(max-width:820px){.project-grid-three{grid-template-columns:1fr!important}.project-image{height:195px}}

/* Internet-sourced project visuals: clean, image-led cards */
.project-image{position:relative;overflow:hidden;height:210px;background:#2b2825;border-bottom:1px solid rgba(224,125,70,.12)}
.project-photo{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:transform .45s ease,filter .45s ease}
.project-card:hover .project-photo{transform:scale(1.055);filter:saturate(1.18) sepia(.08) contrast(1.05)}
.project-image::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(224,125,70,.00),rgba(224,125,70,.16));opacity:0;transition:opacity .35s ease;pointer-events:none}
.project-card:hover .project-image::after{opacity:1}
@media(max-width:860px){.project-image{height:190px}}

/* Final desktop project layout: exactly three cards per row. */
.projects .project-grid.project-grid-three{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
  width:100%;
}
.projects .project-grid.project-grid-three .project-card{min-width:0;}
@media (max-width:900px){
  .projects .project-grid.project-grid-three{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:620px){
  .projects .project-grid.project-grid-three{grid-template-columns:1fr !important;}
}

/* FINAL PROJECT GRID FIX — keep image inside each card and 3 cards per row on desktop */
.projects .project-grid-three{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:20px !important;align-items:stretch}
.projects .project-card{display:flex !important;flex-direction:column !important;min-width:0 !important;overflow:hidden}
.projects .project-card .project-image{display:block !important;width:100% !important;height:205px !important;flex:0 0 205px !important;overflow:hidden !important}
.projects .project-card .project-image .project-photo{display:block !important;width:100% !important;height:100% !important;object-fit:cover !important}
.projects .project-card .project-body{display:flex !important;flex-direction:column !important;min-height:195px !important;flex:1 !important}
@media(max-width:1060px){.projects .project-grid-three{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:700px){.projects .project-grid-three{grid-template-columns:1fr !important}.projects .project-card .project-image{height:200px !important;flex-basis:200px !important}}