:root{
  --bg-dark:#0a0a0a;
  --bg-light:#f5f4ef;
  --surface-black:#0d0d0d;
  --text-on-dark:#ffffff;
  --text-on-dark-muted:#1a1a1a;
  --text-primary:#111111;
  --text-secondary:#555555;
  --text-muted:#8a8a8a;
  --accent-mint:#4ade80;
  --border-hairline:rgba(17,17,17,0.1);
  --border-hairline-dark:rgba(255,255,255,0.12);
  --pill-bg:#ffffff;
  --radius-xs:12px;
  --radius-sm:20px;
  --radius-md:24px;
  --radius-lg:32px;
  --radius-pill:999px;
  --gutter:64px;
  --max-w:1600px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  font-family:'Outfit', sans-serif;
  background:var(--bg-light);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
input,textarea{font-family:inherit;}

.section{
  padding:120px var(--gutter);
  max-width:var(--max-w);
  margin:0 auto;
}
.section-title{
  font-size:64px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1;
  margin:0 0 64px 0;
}

/* =========================================
   NAV — unified everywhere (dropdown only)
========================================= */
.nav{
  position:fixed;
  top:24px;
  left:0;right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:1000;
}
.nav-pill{
  background:var(--surface-black);
  color:var(--text-on-dark);
  border-radius:var(--radius-pill);
  overflow:hidden;
  transition:border-radius .35s var(--ease);
  min-width:190px;
}
.nav-pill.open{
  border-radius:28px;
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  padding:12px 12px 12px 26px;
}
.nav-logo{font-weight:700;font-size:16px;white-space:nowrap;}
.nav-toggle{
  width:36px;height:36px;
  background:var(--pill-bg);
  color:var(--text-primary);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .2s var(--ease);
}
.nav-toggle:hover{transform:scale(1.08);}
.nav-toggle .close{display:none;font-size:14px;}
.nav-toggle.is-open .dots{display:none;}
.nav-toggle.is-open .close{display:inline;}
.dots{font-size:18px;letter-spacing:2px;transform:translateY(-2px);}

.nav-menu{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease), padding .4s var(--ease);
  padding:0 26px;
  display:flex;
  flex-direction:column;
}
.nav-menu.open{
  max-height:320px;
  padding:6px 26px 20px;
}
.nav-link{
  padding:12px 0;
  font-weight:600;
  font-size:16px;
  border-top:1px solid var(--border-hairline-dark);
  transition:opacity .2s;
}
.nav-link:first-child{border-top:none;}
.nav-link:hover{opacity:.6;}

/* =========================================
   HERO — APS
========================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg-light);
  color: var(--text-primary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
}

.hero-inner {
  position: relative;
  letter-spacing:0.05em;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 200px;
}

.hero-headline {
  margin: 0;
  width: 100%;
  font-size: clamp(80px, 10vw, 180px);
  font-weight: 1000;
  line-height: 0.82;
  letter-spacing: -0.075em;
  text-align: center;
  color: var(--text-primary);
}

.hero-headline .line {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.line-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.line-wrap .line {
  display: block;
  width: auto;
}

.scramble-target {
  display: inline-block;
  will-change: contents;
}

.accent-leaf {
  display: inline-block;
  margin-left: 10px;
  font-size: clamp(24px, 2.5vw, 42px);
  transform:
    translateY(-30px)
    rotate(-12deg);
  filter: saturate(1.4);
  line-height: 1;
  z-index: 5;
}

/* Small kicker line between the headline and the tagline */
.hero-subtitle{
  margin:22px 0 0;
  font-size:clamp(14px, 1.4vw, 18px);
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-secondary);
}

.hero-tagline {
  /* Pulled up closer to the headline/subtitle instead of floating far below */
  margin: 20px 0 0;
  font-size: clamp(30px, 7vw, 72px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.055em;
  text-align: center;
  color: var(--text-primary);
}

.hero-marks {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  color: var(--text-primary);
}

.mark-copyright {
  font-size: clamp(28px, 3vw, 52px);
  font-weight: 800;
  letter-spacing: -0.05em;
}

.mark-since {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
}

.hero-scroll-cue{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#999;
}

/* =========================================
   PROGRESS PILL
========================================= */
.progress-pill {
  position: fixed;
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
  width: 54px;
  height: 8px;
  border-radius: 999px;
  background: #858585;
  z-index: 1000;
  overflow: hidden;
}
.progress-pill::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--progress, 0%);
  background: #111;
  border-radius: inherit;
  transition: width 0.1s linear;
}

/* ===== ABOUT ===== */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:100px;
  align-items:start;
}
.about-photo {
  width: 190px;
  aspect-ratio: 3 / 4;
  margin-top: 160px;
  overflow: hidden;

  border: 2px solid #111;
  border-radius: 48% 52% 45% 55% / 42% 48% 52% 58%;

  transform: rotate(-3deg);
}

.about-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  transform: rotate(3deg) scale(1);
}

.about-hey{
  font-size:96px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
  line-height:1;
}
.about-copy{
  padding-top:90px;
}
.about-copy p{
  font-size:28px;
  font-weight:500;
  line-height:1.4;
  color:var(--text-primary);
  margin:0 0 32px 0;
  max-width:640px;
}
.about-copy p:last-child{margin-bottom:0;}

/* ===== SERVICES ===== */
.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:80px;
  row-gap:40px;
}
.service-block h3{
  font-size:28px;
  font-weight:700;
  margin:0 0 12px 0;
}
.service-block .num{color:var(--text-muted);font-weight:700;}
.service-desc{
  color:var(--text-secondary);
  font-size:17px;
  margin:0 0 24px 0;
}
.service-list li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border-top:1px solid var(--border-hairline);
  font-weight:600;
  font-size:17px;
  transition:padding-left .25s var(--ease);
}
.service-list li:hover{padding-left:8px;}
.arrow{color:var(--text-muted);}

/* ===== PROJECTS ===== */
.projects-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.see-all{
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
  white-space:nowrap;
}
.projects-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.project-card{
  background:var(--surface-black);
  color:var(--text-on-dark);
  border-radius:var(--radius-lg);
  padding:40px;
  min-height:320px;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  cursor:pointer;
}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.project-card:focus-visible{
  outline:2px solid var(--accent-mint);
  outline-offset:4px;
}
.project-card h3{
  font-size:40px;
  font-weight:800;
  margin:0;
  overflow-wrap:break-word;
  word-break:break-word;
}
.project-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.tag{
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  color:#999;
  text-transform:uppercase;
}
.pill-btn{
  background:var(--pill-bg);
  color:var(--text-primary);
  padding:12px 20px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:15px;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  display:inline-block;
  position:relative;
  z-index:2;
}
.pill-btn:hover{transform:scale(1.05);}

/* When a project has more than one action (e.g. a live demo alongside the
   case-study trigger), group them so they read as one control cluster
   rather than two competing buttons. */
.project-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Secondary/outlined variant for a non-primary action on a card — used for
   "Live Demo" so it doesn't visually compete with the primary case-study
   button ("View Project"). */
.demo-btn{
  background:transparent;
  border:1px solid var(--border-hairline-dark);
  color:var(--text-on-dark);
}
.demo-btn:hover{
  background:var(--text-on-dark);
  color:var(--text-primary);
}

/* ===== CONTACT ===== */

.contact-grid{
  width:100%;
  max-width:1145px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:150px;
  align-items:start;
}

.contact-copy .section-title{
  font-size:clamp(64px, 6vw, 96px);
  margin:0;
}

.contact-copy p{
  font-size:19px;
  line-height:1.45;
  color:var(--text-secondary);
  max-width:480px;
  margin:0px 0 16px;
}
.contact-copy p:last-of-type {
  margin-bottom: 0;
}

.socials{
  display:flex;
  gap:18px;
}

.social-btn{
  width:64px;
  height:64px;
  border-radius:16px;
  background:#e6e4dd;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.social-btn:hover{
  transform:translateY(-3px);
  background:#dcdad2;
}

/* ===== CONTACT FORM ===== */

.contact-form{
  width:420px !important;
  box-sizing:border-box;
  background:var(--surface-black) !important;
  color:var(--text-on-dark);
  border-radius:28px;
  padding:32px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

.contact-form label{
  display:block !important;
  width:auto !important;
  font-weight:700;
  font-size:14px;
  margin:0 0 8px !important;
}

.contact-form input,
.contact-form textarea{
  display:block !important;
  width:100% !important;
  box-sizing:border-box;
  background:transparent !important;
  border:1px solid var(--border-hairline-dark);
  border-radius:14px;
  padding:14px 16px;
  color:var(--text-on-dark);
  font-size:15px;
  margin:0 0 22px !important;
  resize:none;
}

.contact-form input{
  height:54px;
}

.contact-form textarea{
  height:110px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#777;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--text-on-dark);
}

.submit-btn{
  display:block !important;
  width:100% !important;
  box-sizing:border-box;
  background:var(--pill-bg);
  color:var(--text-primary);
  padding:16px;
  border:0;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:15px;
  margin:4px 0 0 !important;
}

/* =========================================
   FOOTER (dark, closing hero-style section)
========================================= */
.footer-hero{
  position:relative;
  min-height:100vh;
  background:var(--bg-dark);
  color:var(--text-on-dark);
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:0 var(--gutter);
}
.footer-wordmark{
  position:absolute;
  bottom:-7vw;
  left:0;
  width:100%;
  text-align:center;
  font-size:26vw;
  font-weight:800;
  line-height:1;
  color:var(--text-on-dark-muted);
  letter-spacing:-0.02em;
  user-select:none;
  pointer-events:none;
  will-change:transform;
}
.footer-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  padding-top:0;
}
.footer-headline{
  margin:0;
  font-size:clamp(48px, 7vw, 108px);
  font-weight:800;
  line-height:0.98;
  letter-spacing:-0.02em;
  color:var(--text-on-dark);
}
.footer-headline .line{display:block;}

/* Static quick-links + contact block inside the footer content flow */
.footer-links {
  position: absolute;
  top: 10px;
  left: 50%;
  display: flex;
  gap: 64px;
  margin: 0;
}
.fl-label{
  display:block;
  font-weight:700;
  font-size:15px;
  color:var(--text-on-dark);
  margin-bottom:14px;
  font-style:italic;
}
.fl-pills{display:flex;flex-wrap:wrap;gap:10px;max-width:440px;}
.fl-pill{
  border:1px solid transparent;
  background:var(--pill-bg);
  color:var(--text-primary);
  padding:12px 20px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:15px;
  transition:transform .2s var(--ease);
  white-space:nowrap;
}
.fl-pill:hover{
  background:transparent;
  color:var(--text-on-dark);
  border:1px solid var(--text-on-dark);
}
.fl-contact{text-align:left;}
.fl-email{
  color:var(--text-on-dark);
  font-weight:500;
  font-size:16px;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.fl-email:hover{border-color:var(--text-on-dark);}

.footer-marks{
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:2;
  font-weight:800;
  font-size:20px;
  color:var(--text-on-dark);
}
.footer-marks .mark-since{
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  color:#999;
}

/* =========================================
   ALL WORK PAGE (works.html)
========================================= */
.allwork-head{
  text-align:left;
}
.allwork-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}

/* =========================================
   EXPERIENCE PAGE (experience.html)
========================================= */
.exp-hero{
  padding:180px var(--gutter) 40px;
  max-width:var(--max-w);
  margin:0 auto;
}
.exp-hero .section-title{margin-bottom:16px;}
.exp-hero p{
  font-size:19px;
  color:var(--text-secondary);
  max-width:560px;
  margin:0;
}

.exp-group-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 32px 0;
}

.exp-body{padding-top:0;}
.achievements-block .exp-group-label{margin-top:0;}

/* Work experience cards: text + a company/role image that dims by default
   and comes into full focus on hover (desktop) or is simply shown plainly
   on touch, where hover isn't a meaningful gesture. */
.exp-list{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-bottom:100px;
}
.exp-card{
  display:grid;
  grid-template-columns:1fr 150px;
  align-items:center;
  gap:36px;
  background:var(--surface-black);
  color:var(--text-on-dark);
  border-radius:var(--radius-lg);
  padding:36px 40px;
}
.exp-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 16px;
  margin-bottom:14px;
}
.exp-role{
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.01em;
  margin:0;
}
.exp-company{
  font-size:15px;
  font-weight:600;
  color:#bbb;
}
.exp-dates{
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-left:auto;
}
.exp-bullets{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.exp-bullets li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.5;
  color:#dcdcdc;
}
.exp-bullets li::before{
  content:'→';
  color:var(--accent-mint);
  flex-shrink:0;
  font-weight:700;
}
.exp-image{
  width:150px;
  height:150px;
  border-radius:20px;
  overflow:hidden;
  flex-shrink:0;
}
.exp-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) brightness(0.55);
  transform:scale(1.06);
  transition:filter .4s var(--ease), transform .4s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .exp-card:hover .exp-image img{
    filter:grayscale(0) brightness(1);
    transform:scale(1);
  }
}

/* Leadership roles: simple clean list, matching the services-list language */
.leadership-block{margin-bottom:100px;}
.leadership-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:60px;
  row-gap:0;
}
.leadership-list li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 0;
  border-top:1px solid var(--border-hairline);
  font-weight:600;
  font-size:17px;
  position:relative;
}
.leadership-list li .role-meta{
  display:block;
  font-weight:500;
  font-size:14px;
  color:var(--text-secondary);
  margin-top:2px;
}
.leadership-list li .arrow{color:var(--text-muted);flex-shrink:0;}

/* On-hover role preview image — a small floating photo that appears above
   the row. Desktop/pointer-fine only: touch devices have no real hover
   gesture to trigger this, so it simply doesn't render there rather than
   getting stuck open after a tap. */
.leadership-preview{
  position:absolute;
  top:calc(100% + 10px);
  left:16px;
  width:200px;
  height:130px;
  border-radius:16px;
  overflow:hidden;
  background:var(--surface-black);
  box-shadow:0 16px 32px rgba(0,0,0,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px) scale(.94);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:20;
}
.leadership-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (hover:hover) and (pointer:fine){
  .leadership-list li:hover .leadership-preview{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
}

/* Achievements: 3 big image cards with a caption */
.achievements-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.achievement-card{
  background:var(--surface-black);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.achievement-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.achievement-image{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
}
.achievement-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.achievement-caption{
  padding:24px 26px 30px;
  color:var(--text-on-dark);
}
.achievement-caption h4{
  font-size:19px;
  font-weight:800;
  margin:0 0 8px 0;
  letter-spacing:-0.01em;
}
.achievement-caption p{
  font-size:14px;
  line-height:1.5;
  color:#bbb;
  margin:0;
}

/* =========================================
   PROJECT CASE-STUDY MODAL
========================================= */
.project-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,10,0.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.project-modal-overlay.open{
  opacity:1;
  visibility:visible;
}
.project-modal{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:88vh;
  max-height:88dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--surface-black);
  color:var(--text-on-dark);
  border-radius:var(--radius-lg);
  padding:48px;
  transform:translateY(24px) scale(.97);
  opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.project-modal-overlay.open .project-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}
.modal-close{
  position:absolute;
  top:20px;
  right:20px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--pill-bg);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition:transform .2s var(--ease);
}
.modal-close:hover{transform:scale(1.08) rotate(90deg);}
.modal-tag{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#999;
  margin-bottom:14px;
}
.modal-title{
  font-size:40px;
  font-weight:800;
  margin:0 0 16px 0;
  letter-spacing:-0.02em;
  padding-right:40px;
}
.modal-summary{
  font-size:17px;
  line-height:1.5;
  color:#c9c9c9;
  margin:0 0 28px 0;
}
.modal-points{
  list-style:none;
  margin:0 0 32px 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal-points li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.5;
  color:#e8e8e8;
}
.modal-points li::before{
  content:'→';
  color:var(--accent-mint);
  flex-shrink:0;
  font-weight:700;
}
.modal-tech{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
}
.modal-tech span{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-hairline-dark);
  color:#ddd;
}
.modal-learned{
  font-size:14px;
  line-height:1.5;
  color:var(--accent-mint);
  background:rgba(74,222,128,0.08);
  border:1px solid rgba(74,222,128,0.25);
  border-radius:14px;
  padding:14px 16px;
  margin:0 0 28px 0;
}
.modal-learned::before{
  content:'What I learned — ';
  font-weight:700;
  color:var(--accent-mint);
}
.modal-github{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--pill-bg);
  color:var(--text-primary);
  padding:14px 22px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:15px;
  transition:transform .2s var(--ease);
}
.modal-github:hover{transform:scale(1.03);}

/* ===== REVEAL (fade in on enter, fade out / "disappear" on leave) ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* =========================================
   TOUCH DEVICE ADAPTATIONS
   Desktop :hover effects don't map to touch — on many mobile browsers a tap
   triggers :hover and it stays "stuck" until the user taps elsewhere (e.g. a
   lifted project card, or a scaled-up button, frozen after the tap that
   opened the modal or navigated away). Neutralize those on touch/coarse
   pointers and replace with a real, immediate :active press response.
========================================= */
@media (hover: none), (pointer: coarse) {
  .nav-toggle:hover{transform:none;}
  .nav-toggle:active{transform:scale(0.92);}

  .nav-link:hover{opacity:1;}
  .nav-link:active{opacity:.6;}

  .project-card:hover{transform:none;box-shadow:none;}
  .project-card:active{transform:scale(0.985);}

  .pill-btn:hover{transform:none;}
  .pill-btn:active{transform:scale(0.94);}

  .demo-btn:hover{background:transparent;color:var(--text-on-dark);}
  .demo-btn:active{background:var(--text-on-dark);color:var(--text-primary);}

  .service-list li:hover{padding-left:0;}
  .service-list li:active{padding-left:8px;}

  .social-btn:hover{transform:none;background:#e6e4dd;}
  .social-btn:active{transform:scale(0.92);background:#dcdad2;}

  .fl-pill:hover{background:var(--pill-bg);color:var(--text-primary);border:1px solid transparent;}
  .fl-pill:active{transform:scale(0.94);}

  .fl-email:hover{border-color:transparent;}
  .fl-email:active{border-color:var(--text-on-dark);}

  .modal-close:hover{transform:none;}
  .modal-close:active{transform:scale(0.9);}

  .modal-github:hover{transform:none;}
  .modal-github:active{transform:scale(0.95);}

  .submit-btn:active{transform:scale(0.97);}

  /* Hover isn't a real gesture on touch — show experience images plainly
     rather than leaving them permanently dimmed with no way to "hover". */
  .exp-image img{filter:none;transform:scale(1);}

  .achievement-card:hover{transform:none;box-shadow:none;}
  .achievement-card:active{transform:scale(0.98);}
}

/* =========================================
   RESPONSIVE — LAPTOP
========================================= */
@media (max-width:1200px){
  .hero-headline{font-size:clamp(90px, 10vw, 145px);}
  .hero-tagline{font-size:clamp(34px, 4vw, 58px);}
  .hero-marks{left:40px;right:40px;}
  .achievements-grid{grid-template-columns:1fr 1fr;}
}

/* =========================================
   RESPONSIVE — TABLET
========================================= */
@media (max-width:900px){
  .nav{top:calc(24px + env(safe-area-inset-top, 0px));}
  .progress-pill{bottom:calc(17px + env(safe-area-inset-bottom, 0px));}
  .nav-toggle{width:44px;height:44px;}
  .dots{font-size:16px;}

  /* Anchor-jumping to a section (nav links, footer quick-links) was landing
     content flush under the fixed nav pill, tucking headings behind it.
     Give every anchor target enough top clearance to land below the pill. */
  .section,#contact,#projects,#services,#about{scroll-margin-top:110px;}

  .section{padding:80px 24px;}
  .exp-body{padding-top:0;}
  .about-grid,.services-grid,.contact-grid,.projects-grid,.allwork-grid{
    grid-template-columns:1fr;
  }
  .about-hey{font-size:64px;}
  .about-copy p{font-size:20px;}
  .section-title{font-size:44px;margin-bottom:40px;}
  .hero-inner{padding-top:100px;}
  .footer-hero-inner{padding-top:100px;}
  .hero-marks,.footer-marks{left:24px;right:24px;bottom:20px;font-size:15px;}
  .footer-links{gap:36px;}
  .fl-pills{max-width:280px;}

  .hero{padding:0 24px;min-height:100svh;}
  .hero-headline{font-size:clamp(64px, 12vw, 110px);letter-spacing:-0.07em;}
  .hero-tagline{margin-top:28px;font-size:clamp(30px, 5vw, 48px);}
  .accent-leaf{font-size:28px;margin-left:7px;transform:translateY(-20px) rotate(-12deg);}
  .mark-copyright{font-size:30px;}
  .mark-since{font-size:12px;}

  /* About: center on narrow screens to match reference */
  .about-grid{justify-items:center;text-align:center;}
  .about-copy p{max-width:560px;}
  .about-photo{margin-top:32px;}
  .about-copy{padding-top:0;}

  /* Projects: stack + center heading/see-all on narrow screens */
  .projects-head{flex-direction:column;align-items:center;text-align:center;gap:16px;}
  .section-title{text-align:center;width:100%;}
  .projects .section-title{text-align:left;}

  /* Footer headline centers on narrow screens */

  .footer-hero {
    min-height: 100svh;
    padding: 80px 24px 120px;
    align-items: flex-start;
  }

  .footer-hero-inner {
    width: 100%;
    max-width: 100%;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-headline {
    width: 100%;
    text-align: center;
    font-size: clamp(64px, 12vw, 110px);
    line-height: 0.9;
  }

  /* Quick links + contact */
  .footer-links {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin-top: 60px;
    text-align: center;
  }

  .fl-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .fl-label {
    margin-bottom: 14px;
  }

  .fl-pills {
    max-width: 520px;
    justify-content: center;
  }

  .fl-contact {
    text-align: center;
  }
  .footer-marks {
    left: 24px;
    right: 24px;
    bottom: 20px;
  }

  .project-modal{padding:36px;max-width:480px;}
  .modal-title{font-size:32px;}

  /* Contact: form must never exceed the viewport, and the stacked gap
     was tuned for the desktop 2-column layout — way too large stacked. */
  .contact-grid{gap:56px;}
  .contact-copy .section-title{font-size:44px;margin-bottom:0;}
  .contact-form{width:100% !important;}

  /* Experience page */
  .exp-hero{padding:150px 24px 20px;}
  .exp-card{grid-template-columns:1fr;gap:20px;}
  .exp-image{width:100%;height:180px;}
  .exp-dates{margin-left:0;}
  .leadership-list{grid-template-columns:1fr;}
  .achievements-grid{grid-template-columns:1fr;gap:24px;}
}

/* =========================================
   RESPONSIVE — MOBILE
========================================= */
@media (max-width:600px){
  .hero{min-height:100svh;padding:0 20px;}
  .hero-inner{padding-top:0;}
  .hero-headline{font-size:clamp(52px, 15vw, 90px);line-height:0.86;letter-spacing:-0.075em;}
  .hero-subtitle{margin-top:16px;font-size:12px;letter-spacing:0.12em;}
  .hero-tagline{margin-top:22px;font-size:clamp(26px, 7vw, 40px);letter-spacing:-0.05em;}
  .line-wrap{width:100%;}
  .accent-leaf{font-size:23px;margin-left:5px;transform:translateY(-16px) rotate(-12deg);}
  .hero-marks{left:20px;right:20px;bottom:56px;}
  .mark-copyright{font-size:25px;}
  .mark-since{font-size:9px;letter-spacing:0.02em;}
  .hero-scroll-cue{bottom:34px;font-size:9px;letter-spacing:2px;}
  .progress-pill{bottom:calc(10px + env(safe-area-inset-bottom, 0px));width:46px;height:6px;}

  /* Projects heading fully centered on phones, incl. section title */
  .projects .section-title{text-align:center;}
  .projects-head{gap:12px;}

  /* Footer: quick links + contact stack full-width and center */
.footer-hero {
    min-height: 100svh;
    padding: 70px 20px 110px;
    align-items: flex-start;
  }

  .footer-hero-inner {
    width: 100%;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Footer headline */
  .footer-headline {
    width: 100%;
    text-align: center;
    font-size: clamp(52px, 15vw, 90px);
    line-height: 0.86;
    letter-spacing: -0.075em;
  }

  /* Footer links */
  .footer-links {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    margin-top: 55px;
    text-align: center;
  }

  /* Each group */
  .fl-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Labels */
  .fl-label {
    font-size: 27px;
    margin-bottom: 26px;
    text-align: center;
  }

  /* Pills */
  .fl-pills {
    width: 100%;
    max-width: 390px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }

  .fl-pill {
    padding: 15px 28px;
    font-size: 20px;
    border-radius: 999px;
  }

  /* Contact */
  .fl-contact {
    width: 100%;
    text-align: center;
  }
  .fl-email {
    font-size: 20px;
    word-break: break-word;
  }

  /* Footer background wordmark */
  .footer-wordmark {
    font-size: 48vw;
    bottom: -2vw;
  }

  /* Footer bottom */
  .footer-marks {
    left: 20px;
    right: 20px;
    bottom: 48px;
  }
  .footer-marks .mark-copyright {
    font-size: 24px;
  }
  .footer-marks .mark-since {
    font-size: 9px;
  }

  .project-modal{padding:28px;border-radius:24px;max-height:85vh;max-height:85dvh;}
  .modal-title{font-size:28px;padding-right:32px;}
  .modal-summary{font-size:15px;}
  .modal-close{width:40px;height:40px;top:16px;right:16px;}

  /* Project cards: desktop padding/type-scale was too heavy for a 320-390px
     card width — tighten proportions and let the footer wrap if it must
     rather than squeezing the tag against the button. */
  .project-card{padding:28px;min-height:260px;}
  .project-card h3{font-size:clamp(28px, 8vw, 36px);}
  .project-foot{flex-wrap:wrap;gap:12px;}

  /* Experience page */
  .exp-hero .section-title{font-size:44px;}
  .exp-card{padding:28px;}
  .exp-role{font-size:20px;}
  .exp-card-head{flex-direction:column;align-items:flex-start;gap:4px;}
}