:root { --bg:#f7f7f5; --text:#111; --muted:#777; --pad:clamp(24px,5vw,80px); }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-width:320px; min-height:100vh; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; height:65px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad); background:rgba(247,247,245,.92); border-bottom:1px solid rgba(0,0,0,.05); backdrop-filter:blur(18px); }
.brand,.site-header nav a { font-size:13px; font-weight:600; }
.site-header nav a { color:var(--muted); }
.work { width:min(100%,1500px); min-height:100vh; margin:auto; padding:108px var(--pad) 52px; }
.work { transition:transform .95s cubic-bezier(.22,.61,.36,1),opacity .78s cubic-bezier(.4,0,.2,1); will-change:transform,opacity; }
body.is-leaving-for-navx,
body.is-leaving-for-coachclock { pointer-events:none; }
body.is-leaving-for-navx .work,
body.is-leaving-for-coachclock .work { transform:translateX(-42vw); opacity:0; }
.work-kicker { margin-bottom:clamp(28px,4vh,48px); font-size:10px; font-weight:600; letter-spacing:.17em; color:var(--muted); }
.project-showcase { min-height:calc(100vh - 190px); display:grid; grid-template-columns:minmax(190px,1fr) 290px minmax(250px,1fr); align-items:center; gap:clamp(42px,6vw,96px); }
.project-selector { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.project-choice { width:min(100%,280px); min-height:64px; display:grid; grid-template-columns:30px 1fr; align-items:center; gap:12px; padding:14px 16px; border-radius:999px; opacity:.38; transition:opacity .28s ease,background .28s ease,transform .28s ease,box-shadow .28s ease; }
.project-choice:hover,.project-choice.is-active { opacity:1; background:#fff; transform:translateX(4px); box-shadow:0 10px 28px rgba(0,0,0,.06); }
.project-choice span { font-size:10px; font-weight:600; color:var(--muted); }
.project-choice strong { font-size:18px; font-weight:600; letter-spacing:-.035em; }
.phone-preview { display:flex; flex-direction:column; align-items:center; }
.phone-frame { position:relative; width:290px; max-width:100%; aspect-ratio:9/19.5; overflow:hidden; padding:7px; border:1px solid #2a2a2a; border-radius:50px; background:#020202; box-shadow:0 34px 80px rgba(0,0,0,.2),0 0 0 2px rgba(0,0,0,.06); }
.project-video { position:absolute; inset:7px; display:block; width:calc(100% - 14px); height:calc(100% - 14px); border-radius:43px; object-fit:cover; background:#020202; opacity:0; transition:opacity .36s ease; pointer-events:none; }
.project-video.is-active { opacity:1; }
.preview-instruction { margin-top:20px; font-size:10px; color:#888; }
.project-details { display:grid; }
.project-detail { grid-area:1/1; max-width:390px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s ease,transform .3s ease,visibility .3s; }
.project-detail.is-active { opacity:1; visibility:visible; transform:none; }
.project-detail-number,.project-meta { font-size:10px; font-weight:600; letter-spacing:.1em; color:var(--muted); }
.project-detail h1 { margin-top:18px; font-size:clamp(36px,4vw,58px); line-height:.98; letter-spacing:-.055em; font-weight:600; }
.project-detail>p:not(.project-detail-number):not(.project-meta) { margin-top:22px; font-size:15px; line-height:1.62; color:var(--muted); }
.project-meta { margin-top:22px; line-height:1.6; letter-spacing:.04em; }
.project-detail a { display:inline-flex; gap:9px; margin-top:32px; padding-bottom:7px; border-bottom:1px solid #999; font-size:13px; font-weight:600; }
@media(max-width:900px) { .project-showcase { grid-template-columns:minmax(150px,.75fr) 250px minmax(190px,1fr); gap:30px; } .phone-frame { width:250px; } }
@media(max-width:760px) { .site-header { height:65px;padding:0 var(--pad); } .work { padding-top:92px; } .project-showcase { min-height:auto; grid-template-columns:1fr; gap:34px; } .project-selector { order:1; width:100%; flex-direction:row; } .project-choice { min-width:0; min-height:60px; grid-template-columns:20px 1fr; gap:7px; padding:11px; transform:none; } .project-choice strong { font-size:15px; } .phone-preview { order:2; } .phone-frame { width:min(72vw,286px); } .preview-instruction { display:none; } .project-details { order:3; min-height:290px; } }
@media(prefers-reduced-motion:reduce) { * { transition-duration:.01ms!important; } }

.brand{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.portfolio-brand-mark{display:block;width:34px;height:34px;object-fit:contain}

/* Header refinement — slightly larger personal mark, slimmer bar */
.site-header{height:58px!important;padding-top:0!important;padding-bottom:0!important}
.portfolio-brand-mark{width:38px!important;height:38px!important}
@media(max-width:760px){.site-header{height:58px!important}}


/* =========================================================
   IPAD / TABLET — PORTFOLIO HOME
   ========================================================= */
@media (min-width:761px) and (max-width:1180px){
  .site-header{
    height:58px!important;
    padding:0 30px!important;
  }

  .work{
    padding:92px 40px 72px!important;
  }

  .project-showcase{
    width:min(900px,100%)!important;
    min-height:auto!important;
    margin:0 auto!important;
    grid-template-columns:minmax(250px,.82fr) minmax(330px,1.18fr)!important;
    grid-template-rows:auto auto!important;
    gap:34px 48px!important;
    align-items:center!important;
  }

  .project-selector{
    grid-column:1/-1!important;
    grid-row:1!important;
    display:flex!important;
    flex-direction:row!important;
    width:min(720px,100%)!important;
    margin:0 auto!important;
    gap:10px!important;
  }

  .project-choice{
    flex:1 1 0!important;
    min-width:0!important;
    min-height:58px!important;
    padding:12px 16px!important;
    transform:none!important;
  }

  .phone-preview{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:end!important;
  }

  .phone-frame{
    width:min(285px,31vw)!important;
  }

  .project-details{
    grid-column:2!important;
    grid-row:2!important;
    min-height:0!important;
    align-self:center!important;
  }

  .project-details h2{
    font-size:clamp(44px,5.6vw,64px)!important;
  }

  .project-details p{
    max-width:420px!important;
  }
}

@media (min-width:761px) and (max-width:860px){
  .work{
    padding-left:30px!important;
    padding-right:30px!important;
  }

  .project-showcase{
    grid-template-columns:260px minmax(0,1fr)!important;
    gap:30px 34px!important;
  }

  .phone-frame{
    width:250px!important;
  }
}


/* Compact header + portfolio mark */
.site-header{
  height:50px!important;
}
.portfolio-brand-mark{
  width:30px!important;
  height:30px!important;
}
@media (min-width:761px) and (max-width:1180px){
  .site-header{height:52px!important;}
  .portfolio-brand-mark{width:30px!important;height:30px!important;}
}
@media (max-width:760px){
  .site-header{height:50px!important;}
  .portfolio-brand-mark{width:28px!important;height:28px!important;}
}


/* Even smaller portfolio mark */
.portfolio-brand-mark{
  width:24px!important;
  height:24px!important;
}
@media (min-width:761px) and (max-width:1180px){
  .portfolio-brand-mark{width:24px!important;height:24px!important;}
}
@media (max-width:760px){
  .portfolio-brand-mark{width:22px!important;height:22px!important;}
}


/* Selected work label beside portfolio mark */
.brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  text-decoration:none!important;
}
.brand-selected-work{
  display:inline-block;
  font-size:9px;
  line-height:1;
  font-weight:500;
  letter-spacing:.12em;
  color:#777;
  white-space:nowrap;
}
@media (max-width:760px){
  .brand{gap:7px!important;}
  .brand-selected-work{
    font-size:8px;
    letter-spacing:.1em;
  }
}

/* =========================================================
   RESPONSIVE CONSISTENCY PASS — PORTFOLIO HOME
   ========================================================= */
@media (min-width:761px) and (max-width:1180px){
  .site-header{
    height:52px!important;
    padding:0 30px!important;
  }

  .work{
    width:100%!important;
    max-width:980px!important;
    margin:0 auto!important;
    padding:84px 32px 60px!important;
  }

  .project-showcase{
    width:100%!important;
    max-width:860px!important;
    margin:0 auto!important;
    grid-template-columns:minmax(250px,290px) minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:32px 46px!important;
    align-items:center!important;
  }

  .project-selector{
    grid-column:1/-1!important;
    width:min(650px,100%)!important;
    margin:0 auto!important;
  }

  .project-choice{
    min-height:56px!important;
    padding:11px 15px!important;
  }

  .phone-preview{
    justify-self:end!important;
  }

  .phone-frame{
    width:min(280px,31vw)!important;
  }

  .project-details{
    min-height:0!important;
    align-self:center!important;
  }

  .project-detail{
    max-width:390px!important;
  }

  .project-detail h1{
    font-size:clamp(42px,5.4vw,58px)!important;
  }
}

@media (max-width:760px){
  .site-header{
    height:50px!important;
    padding:0 18px!important;
  }

  .work{
    width:100%!important;
    padding:76px 20px 42px!important;
  }

  .project-showcase{
    width:100%!important;
    max-width:430px!important;
    min-height:auto!important;
    margin:0 auto!important;
    grid-template-columns:1fr!important;
    gap:26px!important;
  }

  .project-selector{
    width:100%!important;
    margin:0 auto!important;
    gap:8px!important;
  }

  .project-choice{
    min-height:54px!important;
    padding:10px 12px!important;
    border-radius:999px!important;
  }

  .project-choice strong{
    font-size:14px!important;
  }

  .phone-frame{
    width:min(68vw,260px)!important;
  }

  .project-details{
    width:100%!important;
    min-height:250px!important;
    text-align:center!important;
  }

  .project-detail{
    width:100%!important;
    max-width:350px!important;
    margin:0 auto!important;
  }

  .project-detail h1{
    margin-top:14px!important;
    font-size:clamp(36px,10vw,44px)!important;
    line-height:1!important;
  }

  .project-detail>p:not(.project-detail-number):not(.project-meta){
    margin-top:18px!important;
    font-size:14px!important;
    line-height:1.55!important;
  }

  .project-meta{
    margin-top:18px!important;
  }

  .project-detail a{
    margin-top:24px!important;
  }
}