:root{
  --leading:1.6; --tracking:.02em; --h1:42px; --h2:28px; --h3:18px;
  --bg:#ffffff; --text:#111; --muted:#666; --line:#e5e5e5; --hover:#f7f7f7;
  --maxw:1160px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* Header */
header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--line);z-index:50}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:66px;display:block}
.menu{font-weight:700;display:flex;gap:18px}
.menu a{font-size:14px;opacity:.85;padding:8px;border-radius:8px;transition:background .2s ease}
.menu a:hover{background:var(--hover)}

/* Landing Grid */
.landing{padding:24px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tile{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#fafafa}
.tile img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .35s ease}

.tile{display:flex;flex-direction:column;gap:6px}
.tile-label{font-size:13px;line-height:1.4;color:var(--muted)}
.tile:hover img{transform:scale(1.02)}
@media (max-width:860px){.grid{grid-template-columns:1fr}}

/* Detail page */
main section{padding:40px 0}
.breadcrumbs{font-size:13px;color:var(--muted);margin:12px 0 8px}
.hero{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#f8f8f8}
.hero video,.hero img{width:100%;display:block;aspect-ratio:16/9;background:#000}
.two{display:block}
.two .hero video{width:100%;height:auto;display:block}
.two .aside{margin-top:20px}
.two h1{margin-top:16px;font-size:72px;line-height:1.05;font-weight:800}
@media (max-width:960px){.two{grid-template-columns:1fr}}
.aside{border:1px solid var(--line);border-radius:6px;padding:14px}
.aside h4{margin:0 0 8px}
.muted{color:var(--muted)}
.btn{display:inline-block;margin-top:10px;border:1px solid var(--line);padding:10px 12px;border-radius:8px}
footer{padding:36px 0;color:var(--muted)}

/* About page */
.about-wrap{padding:40px 0}
.about-grid{display:grid;grid-template-columns:560px 1fr;gap:36px;align-items:start}
.about-photo{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fafafa}
.about-photo img{width:100%;display:block}
.about-copy h1{font-size:32px;line-height:1.25;margin:0 0 14px}
.about-copy p{color:var(--muted);margin:0 0 14px}
.kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:13px;margin-bottom:6px}
.ul-plain{margin:12px 0 0;padding-left:18px;color:var(--muted)}
.contact-cards{display:flex;gap:14px;margin-top:10px}
.icon-link{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:8px 10px;border-radius:8px}
@media (max-width:1100px){.about-grid{grid-template-columns:1fr}}

/* Typographic polish */
body{line-height:var(--leading);letter-spacing:var(--tracking)}
h1{font-size:var(--h1);letter-spacing:0}
h3{font-size:var(--h3)}
p,li{font-size:16px}
.container p{max-width:72ch}
hr.sep{border:0;border-top:1px solid var(--line);margin:24px 0}
.small{font-size:13px;color:var(--muted)}

/* === How I Work: Animated Timeline === */
.flow{padding:40px 0}
.flow-steps{position:relative;display:grid;gap:16px;margin-top:18px}
.flow-steps::before{content:'';position:absolute;left:18px;top:0;bottom:0;width:2px;background:var(--line)}
.step-card{position:relative;border:1px solid var(--line);border-radius:10px;padding:14px 14px 14px 54px;background:#fff;box-shadow:none;opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease}
.step-card .num{position:absolute;left:10px;top:14px;width:20px;height:20px;border-radius:999px;background:#e6f5ef;border:2px solid #cfeadd;display:grid;place-items:center;font-size:12px;color:#0b6; font-weight:700}
.step-card h4{margin:0 0 6px;font-size:16px}
.step-card p{margin:0;color:var(--muted)}
/* reveal states */
.step-card.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .step-card{transition:none}
}


/* Dark theme + project pages */
body.dark{
  background:#050505;
  color:#f5f5f5;
}
body.dark header{
  background:rgba(0,0,0,.85);
  border-bottom-color:#222;
}
body.dark .hero,
body.dark .aside,
body.dark .tile{
  border-color:#222;
  background:#090909;
}
body.dark .muted,
body.dark .tile-label{
  color:#aaa;
}
body.dark footer{
  border-top:1px solid #222;
}

/* Theme toggle */
.theme-toggle{
  border:1px solid var(--line);
  background:transparent;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  margin-left:12px;
}
.theme-toggle:hover{
  background:var(--hover);
}

/* Hero reel section */
.hero-reel{
  padding:0;
}
.hero-video-wrap{
  position:relative;
  border-bottom:1px solid var(--line);
}
.hero-video-wrap video.hero-bg{
  width:100%;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#000;
}
.hero-overlay{
  position:absolute;
  inset:auto 10% 12%;
  max-width:520px;
}
.hero-overlay h1{
  font-size:40px;
  margin:0 0 10px;
}
.hero-overlay p{
  margin:0 0 16px;
}
.hero-overlay .hero-btn{
  margin-top:0;
}
.hero-overlay .sound-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  font-size:13px;
}

/* Tile hover video previews */
.tile{
  position:relative;
}
.tile video.tile-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .25s ease;
}
.tile:hover video.tile-preview{
  opacity:1;
}

/* Nav + mobile tweaks */
.menu a{
  padding:0 10px;
}
@media (max-width:860px){
  .nav{
    flex-wrap:wrap;
    gap:8px;
    padding-top:8px;
    padding-bottom:8px;
    height:auto;
  }
  .menu{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .hero-overlay{
    inset:auto 20px 20px;
  }
  .hero-overlay h1{
    font-size:28px;
  }
  .two h1{
    font-size:40px;
  }
}

/* Slightly larger portfolio labels */
.tile-label{
  font-size:14px;
}



/* ---------------------------------------------------- */
/* HERO TITLE + TAGLINE UPGRADE — "Design. Motion. Magic." */
/* ---------------------------------------------------- */

.hero-overlay {
  position: absolute;
  inset: auto 8% 12%;
  max-width: 640px;
  color: #ffffff;
  z-index: 3;
}

.hero-title {
  font-size: 64px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 0 0 14px;
  text-transform: none;
  font-family: inherit;
}

.hero-tagline {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 40rem;
  margin: 0 0 20px;
  font-weight: 400;
}

.hero-btn {
  margin-right: 12px;
}

@media (max-width: 860px) {
  .hero-overlay {
    inset: auto 20px 28px;
    max-width: none;
  }
  .hero-title {
    font-size: 36px;
    line-height: 1.1;
  }
  .hero-tagline {
    font-size: 15px;
    line-height: 1.6;
  }
}