@font-face {
  font-family: 'Google Sans Flex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 1 1000;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/google-sans-flex:vf@5.3.1/latin-wght-normal.woff2) format(woff2) tech(variations);
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#232323;
  --bg-soft:#2b2a2c;
  --red:#DB393C;
  --red-hover:#ff5548;
  --brown:#502D16;
  --cream:#F2ECE8;
  --ink:var(--cream);
  --muted:#a89f96;
  --font-body:'Google Sans Flex Variable','Google Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --maxw:1100px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-optical-sizing:auto;
  line-height:1.6;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
svg{ display:block; }

:focus-visible{
  outline:2px solid var(--red-hover);
  outline-offset:3px;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:0.85rem;
  color:var(--red-hover);
  display:inline-block;
  margin-bottom:8px;
}

h1,h2,h3{
  font-family:var(--font-body);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.2px;
  line-height:1.04;
}

/* ---------- NAV ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(35,35,35,0.9);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(242,236,232,0.08);
}
.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:var(--maxw);
  margin:0 auto;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-brand .name{
  font-family:var(--font-body);
  font-weight:800;
  text-transform:uppercase;
  font-size:1.05rem;
  letter-spacing:0.2px;
}
.nav-mark{
  display:inline-flex;
  height:20px;
  width:auto;
}
.nav-mark svg{ height:100%; width:auto; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--ink);
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-links{
  display:flex;
  gap:28px;
  font-size:0.95rem;
  font-weight:600;
}
.nav-links a{
  position:relative;
  padding:4px 2px;
  color:var(--muted);
  transition:color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active{
  color:var(--ink);
}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:var(--red-hover);
}

@media (max-width:720px){
  .nav-toggle{ display:flex; }

  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background:var(--bg);
    border-bottom:1px solid rgba(242,236,232,0.08);
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .nav-links.open{ max-height:320px; }
  .nav-links li{ width:100%; }
  .nav-links a{
    display:block;
    padding:16px 24px;
    font-size:1rem;
  }
  .nav-links a.active::after{ display:none; }
  .nav-links a.active{ color:var(--red-hover); }
}

/* ---------- SECTIONS ---------- */
section{
  padding:96px 0;
  position:relative;
}
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* ---------- HERO ---------- */
#home{
  padding-top:110px;
  padding-bottom:120px;
  overflow:hidden;
}

.hero-inner{ position:relative; z-index:1; max-width:760px; }

.hero-inner h1{
  font-size:clamp(2.6rem, 7vw, 4.6rem);
  margin-bottom:18px;
}

.hero-mark{
  display:inline-flex;
  background:var(--red);
  padding:16px 26px;
  margin-bottom:28px;
}
.hero-mark svg{ height:38px; width:auto; }

.hero-inner .role{
  font-size:1.05rem;
  color:var(--muted);
  font-weight:600;
  margin-bottom:18px;
}
.hero-inner p{
  font-size:1.08rem;
  color:var(--ink);
  max-width:560px;
  margin-bottom:32px;
}

.btn{
  display:inline-block;
  background:var(--red);
  color:var(--cream);
  font-weight:700;
  padding:14px 30px;
  font-size:0.98rem;
  letter-spacing:0.3px;
  transition:background 0.2s ease, transform 0.2s ease;
}
.btn:hover{ background:var(--red-hover); transform:translateY(-2px); }

/* ---------- SECTION HEADERS ---------- */
.section-head{ margin-bottom:48px; max-width:640px; }
.section-head h2{ font-size:clamp(2rem, 5vw, 2.8rem); }

/* ---------- EXPERIENCE & SKILLS ---------- */
.exp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-bottom:56px;
}
@media (max-width:720px){ .exp-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--bg-soft);
  border:1px solid rgba(242,236,232,0.08);
  padding:28px;
}
.card .meta{
  font-family:var(--font-body);
  font-weight:700;
  color:var(--red-hover);
  font-size:0.95rem;
  display:block;
  margin-bottom:10px;
}
.card h3{
  font-size:1.3rem;
  margin-bottom:12px;
}
.card p{ color:var(--muted); font-size:0.98rem; }

.skills-block h3{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  font-family:var(--font-body);
  font-weight:700;
  margin-bottom:14px;
}
.pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:36px;
}
.pill{
  border:1px solid rgba(242,236,232,0.18);
  padding:8px 16px;
  border-radius:999px;
  font-size:0.9rem;
  color:var(--ink);
}
.pill.tool{
  border-color:rgba(219,57,60,0.4);
}

/* ---------- PORTFOLIO ---------- */
.portfolio-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
@media (max-width:720px){ .portfolio-grid{ grid-template-columns:1fr; } }

.proj-card{
  background:var(--bg-soft);
  border:1px solid rgba(242,236,232,0.08);
  position:relative;
  overflow:hidden;
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.proj-card:hover{ transform:translateY(-4px); border-color:rgba(219,57,60,0.4); }

.proj-thumb{
  aspect-ratio:4/3;
  width:100%;
  background-color:var(--bg);
  background-image:repeating-linear-gradient(135deg, rgba(242,236,232,0.06) 0 10px, transparent 10px 20px);
  border-bottom:1px solid rgba(242,236,232,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.proj-thumb span{
  color:var(--muted);
  font-size:0.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.6px;
}

.proj-body{ padding:28px 32px 32px; }

.proj-tag{
  display:inline-block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--red-hover);
  margin-bottom:14px;
}
.proj-card h3{ font-size:1.5rem; margin-bottom:14px; }
.proj-card p{ color:var(--muted); font-size:0.98rem; }

/* ---------- CONTACT ---------- */
#contact{
  background:var(--red);
  color:var(--cream);
  text-align:center;
  padding:110px 0;
  margin-top:40px;
}
#contact .eyebrow{ color:var(--bg); }
#contact h2{
  font-size:clamp(2.4rem, 7vw, 4rem);
  margin-bottom:20px;
}
#contact p.lead{
  font-size:1.1rem;
  max-width:520px;
  margin:0 auto 36px;
  opacity:0.92;
}
.contact-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.contact-links a.email{
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(1.3rem, 4vw, 2rem);
  text-transform:none;
  border-bottom:3px solid var(--bg);
  padding-bottom:4px;
  transition:opacity 0.2s ease;
}
.contact-links a.email:hover{ opacity:0.75; }
.contact-links .socials{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin-top:6px;
}
.contact-links .socials a{
  font-weight:600;
  padding:6px 2px;
  border-bottom:1px solid var(--bg);
}
.phones{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:6px;
  font-weight:600;
}

footer{
  text-align:center;
  padding:32px 0;
  font-family:var(--font-body);
  font-weight:700;
  color:var(--muted);
  font-size:0.95rem;
  background:var(--bg);
}