@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/poppins-300.woff2?v=20260629-r2') format('woff2');
}

@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/poppins-400.woff2?v=20260629-r2') format('woff2');
}

@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/poppins-500.woff2?v=20260629-r2') format('woff2');
}

@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/poppins-600.woff2?v=20260629-r2') format('woff2');
}

@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/poppins-700.woff2?v=20260629-r2') format('woff2');
}

@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/poppins-800.woff2?v=20260629-r2') format('woff2');
}

:root{
  --bg:#090909;
  --bg-deep:#050505;
  --surface:#141414;
  --surface-soft:#1b1b1b;
  --line:rgba(255,255,255,0.1);
  --line-strong:rgba(255,255,255,0.18);
  --text:#ffffff;
  --muted:#c9c9c9;
  --soft:#9f9f9f;
  --accent:#ff6175;
  --accent-warm:#f0a84a;
  --shadow:0 18px 42px rgba(0,0,0,0.35);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}

body{
  font-family:'Poppins','Segoe UI',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

body::selection{
  background:var(--accent);
  color:var(--text);
}

a{
  color:inherit;
}

img,
video{
  width:100%;
  display:block;
}

img{
  object-fit:cover;
}

video{
  background:#000000;
}

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:2000;
  transform:translateY(-160%);
  padding:10px 14px;
  background:var(--text);
  color:#000000;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  transition:transform 0.2s ease;
}

.skip-link:focus{
  transform:translateY(0);
}

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  padding:18px 64px;
  background:rgba(5,5,5,0.7);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  z-index:1000;
  transition:background 0.25s ease, box-shadow 0.25s ease;
}

.navbar.is-scrolled{
  background:rgba(5,5,5,0.92);
  box-shadow:0 12px 28px rgba(0,0,0,0.24);
}

.logo{
  text-decoration:none;
  font-size:21px;
  font-weight:800;
  white-space:nowrap;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  list-style:none;
}

.nav-links a{
  text-decoration:none;
  color:#f4f4f4;
  font-size:15px;
  font-weight:600;
  transition:color 0.2s ease;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a.is-active{
  color:var(--accent);
}

.hero{
  position:relative;
  min-height:calc(100vh - 132px);
  min-height:min(900px, calc(100svh - 132px));
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:144px 64px 70px;
  background:var(--bg-deep);
}

.hero-gallery{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  z-index:0;
}

.hero-gallery img{
  height:100%;
  object-fit:cover;
  filter:saturate(0.92) contrast(1.06);
  opacity:0.68;
}

.hero-gallery img:nth-child(2),
.hero-gallery img:nth-child(3){
  transform:scale(1.04);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.94) 0%, rgba(5,5,5,0.72) 42%, rgba(5,5,5,0.38) 100%),
    linear-gradient(0deg, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.12) 48%, rgba(5,5,5,0.65) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  min-width:0;
  max-width:950px;
}

.hero-kicker,
.section-label,
.card-meta,
.project-badge{
  color:var(--accent);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0;
}

.hero-kicker{
  margin-bottom:16px;
}

.hero h1{
  font-size:84px;
  line-height:0.98;
  font-weight:800;
  margin-bottom:16px;
}

.hero-role{
  color:#ffffff;
  font-size:28px;
  font-weight:700;
  line-height:1.12;
  margin-bottom:14px;
}

.hero-role span{
  display:block;
}

.hero-text{
  max-width:760px;
  color:#dddddd;
  font-size:19px;
  margin-bottom:28px;
}

.hero-text,
.lead-copy,
.section-header h2,
.contact-grid strong{
  overflow-wrap:break-word;
}

.contact-main{
  width:min(1240px, calc(100% - 64px));
  min-height:calc(100svh - 94px);
  margin:0 auto;
  padding:150px 0 72px;
}

.contact-intro{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(280px, 0.65fr);
  gap:60px;
  align-items:end;
  padding-bottom:46px;
  border-bottom:1px solid var(--line-strong);
}

.contact-intro h1{
  max-width:800px;
  font-size:64px;
  line-height:1.04;
}

.contact-intro p{
  color:#d4d4d4;
  font-size:17px;
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap:64px;
  padding-top:48px;
}

.contact-details{
  display:grid;
  align-content:start;
  gap:0;
}

.contact-detail{
  display:block;
  padding:18px 0;
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.contact-detail:first-child{
  padding-top:0;
}

.contact-detail span{
  display:block;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:4px;
}

.contact-detail strong{
  display:block;
  color:#ffffff;
  font-size:16px;
  overflow-wrap:anywhere;
}

a.contact-detail:hover strong,
a.contact-detail:focus strong{
  color:var(--accent);
}

.contact-availability{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:24px;
  color:#bdbdbd;
  font-size:14px;
}

.availability-dot{
  flex:0 0 auto;
  width:9px;
  height:9px;
  margin-top:6px;
  border-radius:50%;
  background:#64d88b;
  box-shadow:0 0 0 5px rgba(100,216,139,0.12);
}

.contact-form-panel{
  padding:32px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.contact-form,
.contact-form label{
  display:grid;
  gap:9px;
}

.contact-form{
  gap:20px;
}

.contact-form label{
  color:#f5f5f5;
  font-size:13px;
  font-weight:700;
}

.form-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  outline:none;
  background:#090909;
  color:#ffffff;
  font:inherit;
  resize:vertical;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,97,117,0.12);
}

.contact-form textarea{
  min-height:180px;
}

.honeypot{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.form-actions{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:50px;
}

.form-submit{
  border:0;
  cursor:pointer;
  font:inherit;
}

.form-submit:disabled{
  cursor:wait;
  opacity:0.7;
}

.form-status{
  color:var(--muted);
  font-size:14px;
}

.form-status.is-success{
  color:#79dfa0;
}

.form-status.is-error{
  color:#ff8b9a;
}

.section,
.section-header,
.profile-layout,
.profile-layout > *,
.campaign-layout,
.campaign-layout > *,
.project-head,
.project-head > *,
.experience-card,
.education-card,
.contact-grid a,
.metric-card{
  min-width:0;
  max-width:100%;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:34px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 20px;
  border-radius:8px;
  text-decoration:none;
  font-weight:800;
  border:1px solid transparent;
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:hover,
.btn:focus{
  transform:translateY(-2px);
}

.btn.primary{
  background:var(--accent);
  color:#ffffff;
}

.btn.secondary{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.2);
  color:#ffffff;
}

.hero-highlights{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  list-style:none;
  max-width:980px;
}

.hero-highlights li{
  min-height:100%;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
}

.hero-highlights strong,
.hero-highlights span{
  display:block;
}

.hero-highlights strong{
  font-size:15px;
  margin-bottom:4px;
}

.hero-highlights span{
  color:#d6d6d6;
  font-size:14px;
}

.section{
  max-width:1240px;
  margin:0 auto;
  padding:92px 32px 34px;
}

.section-header{
  max-width:900px;
  margin-bottom:30px;
}

.section-label{
  display:block;
  margin-bottom:10px;
}

.section-header h2{
  font-size:46px;
  line-height:1.12;
  font-weight:800;
}

.profile-layout{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:42px;
  align-items:start;
}

.lead-copy{
  color:#d9d9d9;
  font-size:20px;
  line-height:1.75;
}

.skill-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.skill-cloud span{
  padding:10px 12px;
  color:#eeeeee;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  font-size:14px;
  font-weight:600;
}

.experience-grid,
.education-grid,
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.experience-card,
.education-card,
.contact-grid a,
.metric-card{
  background:linear-gradient(180deg, var(--surface-soft) 0%, var(--surface) 100%);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
}

.experience-card,
.education-card{
  padding:24px;
}

.card-meta{
  margin-bottom:10px;
}

.experience-card h3,
.education-card h3{
  font-size:22px;
  line-height:1.25;
  margin-bottom:12px;
}

.experience-card ul,
.campaign-list,
.project-points{
  padding-left:19px;
}

.experience-card li,
.campaign-list li,
.project-points li,
.education-card p{
  color:#d0d0d0;
}

.experience-card li + li,
.campaign-list li + li{
  margin-top:8px;
}

.project-block{
  padding:58px 0 64px;
  border-top:1px solid var(--line-strong);
}

.project-block:last-child{
  border-bottom:1px solid var(--line-strong);
}

.project-head{
  display:grid;
  grid-template-columns:0.8fr 1fr;
  gap:34px;
  align-items:start;
  margin-bottom:24px;
}

.project-badge{
  display:inline-block;
  margin-bottom:10px;
  padding:7px 9px;
  color:#ffffff;
  background:rgba(255,97,117,0.18);
  border:1px solid rgba(255,97,117,0.38);
  border-radius:6px;
}

.project-head h3{
  font-size:38px;
  line-height:1.1;
}

.project-head p{
  color:#d6d6d6;
  font-size:18px;
  margin-bottom:14px;
}

.project-points{
  display:grid;
  gap:5px;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:start;
}

.project-grid.two-columns{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.media-card{
  overflow:hidden;
  border-radius:8px;
  background:#050505;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 14px 34px rgba(0,0,0,0.28);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.media-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 18px 44px rgba(0,0,0,0.4);
}

.media-card.portrait{
  aspect-ratio:9 / 16;
}

.media-card.portrait.tall-image{
  aspect-ratio:9 / 16;
}

.image-frame{
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  background:#111111;
}

.image-frame::before{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:0;
  background-image:var(--media-bg);
  background-position:center;
  background-size:cover;
  filter:blur(18px) brightness(0.42) saturate(0.82);
  opacity:0.82;
  transform:scale(1.06);
}

.image-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(0,0,0,0.16);
}

.image-frame img{
  position:relative;
  z-index:1;
  width:calc(100% - 14px);
  height:calc(100% - 14px);
  object-fit:contain;
  object-position:center;
  border-radius:5px;
  box-shadow:0 12px 28px rgba(0,0,0,0.28);
}

.video-frame{
  padding:8px;
}

.video-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:9 / 16;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:6px;
  background:#000000;
}

.video-wrapper video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.canele-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.landscape-video{
  grid-column:1 / -1;
}

.landscape-video .video-wrapper{
  aspect-ratio:16 / 9;
}

.wide-portrait-video{
  grid-column:auto;
}

.wide-portrait-video .video-wrapper{
  position:relative;
  isolation:isolate;
  aspect-ratio:9 / 16;
}

.wide-portrait-video .video-wrapper::before{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:0;
  background-image:var(--video-bg);
  background-position:center;
  background-size:cover;
  filter:blur(18px) brightness(0.4) saturate(0.85);
  transform:scale(1.06);
}

.wide-portrait-video video{
  position:absolute;
  z-index:1;
  object-fit:contain;
}

.campaign-section{
  max-width:1240px;
}

.campaign-layout{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:34px;
  align-items:start;
}

.campaign-list{
  margin-top:20px;
}

.metrics-grid{
  display:grid;
  gap:16px;
}

.metric-card{
  padding:28px;
}

.metric-card strong,
.metric-card span{
  display:block;
}

.metric-card strong{
  font-size:40px;
  line-height:1;
  margin-bottom:9px;
}

.metric-card span{
  color:#cfcfcf;
  font-size:16px;
}

.contact-grid a{
  display:block;
  padding:22px;
  text-decoration:none;
  transition:transform 0.2s ease, border-color 0.2s ease;
}

.contact-grid a:hover,
.contact-grid a:focus{
  transform:translateY(-2px);
  border-color:rgba(255,97,117,0.46);
}

.contact-grid span{
  display:block;
  color:var(--accent);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:8px;
}

.contact-grid strong{
  display:block;
  color:#ffffff;
  font-size:18px;
  overflow-wrap:anywhere;
}

.footer{
  text-align:center;
  padding:40px 20px;
  color:#929292;
}

@media (max-width:1050px){
  .navbar{
    padding:16px 28px;
  }

  .nav-links{
    gap:16px;
  }

  .hero{
    padding:134px 32px 58px;
  }

  .hero h1{
    font-size:66px;
  }

  .hero-gallery{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .hero-gallery img:nth-child(3),
  .hero-gallery img:nth-child(4){
    display:none;
  }

  .profile-layout,
  .project-head,
  .campaign-layout,
  .contact-intro,
  .contact-layout{
    grid-template-columns:1fr;
  }

  .contact-intro,
  .contact-layout{
    gap:34px;
  }

  .project-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .project-grid.two-columns{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .section-header h2{
    font-size:40px;
  }
}

@media (max-width:760px){
  html{
    scroll-padding-top:132px;
  }

  .navbar{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    padding:14px 20px;
  }

  .nav-links{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px 14px;
  }

  .nav-links a{
    display:block;
    font-size:13px;
  }

  .hero{
    min-height:auto;
    padding:174px 28px 54px 20px;
  }

  .hero-overlay{
    background:
      linear-gradient(90deg, rgba(5,5,5,0.94) 0%, rgba(5,5,5,0.76) 100%),
      linear-gradient(0deg, rgba(5,5,5,0.98) 0%, rgba(5,5,5,0.35) 50%, rgba(5,5,5,0.72) 100%);
  }

  .hero h1{
    font-size:48px;
  }

  .hero-role{
    font-size:22px;
  }

  .hero-text,
  .lead-copy{
    font-size:17px;
    max-width:330px;
  }

  .section-header h2{
    max-width:340px;
  }

  .hero-highlights,
  .experience-grid,
  .education-grid,
  .contact-grid,
  .project-grid,
  .project-grid.two-columns{
    grid-template-columns:1fr;
  }

  .section{
    padding:76px 28px 28px 20px;
  }

  .contact-main{
    width:calc(100% - 40px);
    padding:174px 0 48px;
  }

  .contact-intro h1{
    font-size:42px;
  }

  .contact-form-panel{
    padding:22px;
  }

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

  .form-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .section-header h2{
    font-size:32px;
  }

  .project-block{
    padding:42px 0 48px;
  }

  .project-head h3{
    font-size:30px;
  }

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

  .landscape-video{
    grid-column:auto;
  }

}

@media (max-width:460px){
  .hero h1{
    font-size:40px;
  }

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

  .btn{
    width:100%;
  }

  .section-header h2{
    font-size:28px;
  }

  .experience-card,
  .education-card,
  .metric-card,
  .contact-grid a{
    padding:20px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}