:root {
  --ink:#171717;
  --muted:#777;
  --line:#e8e8e8
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea,select {
  font:inherit
}
header {
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5.5%;
  background:white
}
.brand {
  font-size:16px;
  letter-spacing:.17em;
  font-weight:600;
  line-height:1.45
}
.brand span {
  display:block;
  font-size:9px;
  font-weight:400;
  letter-spacing:.32em
}
nav {
  display:flex;
  gap:35px;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase
}
nav a:hover,.textlink:hover {
  opacity:.5
}
main {
  padding:0 5.5%
}
.intro {
  padding:125px 0 60px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px
}
.intro h1 {
  font-size:clamp(42px,6.7vw,108px);
  font-weight:400;
  letter-spacing:-.065em;
  line-height:1.02;
  margin:0
}
.intro p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin:0 0 7px
}
.hero img {
  width:100%;
  height:min(65vw,680px);
  object-fit:cover;
  display:block
}
.meta {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.12em;
  padding-top:17px;
  text-transform:uppercase
}
.section {
  padding:150px 0 0
}
.eyebrow {
  font-size:10px;
  letter-spacing:.18em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:35px
}
.section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:45px
}
.section h2 {
  font-size:clamp(34px,4vw,60px);
  letter-spacing:-.055em;
  font-weight:400;
  margin:0
}
.textlink {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  border-bottom:1px solid #222;
  padding-bottom:6px
}
.projects {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px 25px
}
.project img {
  display:block;
  width:100%;
  height:clamp(240px,35vw,530px);
  object-fit:cover;
  transition:transform .65s
}
.project .image {
  overflow:hidden
}
.project:hover img {
  transform:scale(1.035)
}
.project h3 {
  font-size:15px;
  font-weight:400;
  margin:19px 0 6px
}
.project p {
  font-size:11px;
  color:var(--muted);
  margin:0
}
.about {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:70px;
  border-top:1px solid var(--line);
  padding-top:75px
}
.about p {
  font-size:clamp(22px,2.5vw,36px);
  letter-spacing:-.035em;
  line-height:1.4;
  margin:0
}
.services {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:50px
}
.services div {
  border-top:1px solid var(--line);
  padding:20px 0;
  font-size:12px
}
.contact {
  border-top:1px solid var(--line);
  padding-top:75px;
  margin-bottom:140px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px
}
.contact h2 {
  margin-bottom:22px
}
.contact p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted)
}
form {
  display:grid;
  gap:22px
}
label {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  margin-bottom:10px
}
input,select,textarea {
  width:100%;
  border:0;
  border-bottom:1px solid #ccc;
  background:white;
  padding:12px 0;
  outline:0;
  border-radius:0;
  font-size:13px
}
input:focus,textarea:focus,select:focus {
  border-color:#111
}
textarea {
  min-height:95px;
  resize:vertical
}
button {
  background:#171717;
  color:#fff;
  border:0;
  padding:18px 24px;
  cursor:pointer;
  text-align:left;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between
}
button:hover {
  background:#444
}
.form-note {
  font-size:11px;
  color:var(--muted);
  line-height:1.6
}
footer {
  border-top:1px solid var(--line);
  padding:30px 5.5%;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.09em
}
.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s,transform .7s
}
.reveal.visible {
  opacity:1;
  transform:none
}
@media(max-width:700px) {
  header {
    height:75px;
    padding:0 6%
  }
  nav {
    gap:14px;
    font-size:10px
  }
  .brand {
    font-size:12px
  }
  .brand span {
    font-size:8px
  }
  main {
    padding:0 6%
  }
  .intro {
    padding:85px 0 35px;
    display:block
  }
  .intro p {
    margin-top:25px
  }
  .hero img {
    height:70vh
  }
  .section {
    padding-top:100px
  }
  .projects {
    grid-template-columns:1fr;
    gap:40px
  }
  .project img {
    height:90vw
  }
  .about,.contact {
    grid-template-columns:1fr;
    gap:35px
  }
  .about {
    padding-top:45px
  }
  .contact {
    padding-top:45px;
    margin-bottom:85px
  }
  .services {
    grid-template-columns:1fr
  }
  .section-head {
    align-items:end
  }
  .section h2 {
    font-size:38px
  }
  footer {
    padding:25px 6%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .project img {
    transition:none
  }
}
/* Portfolio additions */
.comparison-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:44px 24px
}
.comparison-card h3 {
  font-size:16px;
  font-weight:400;
  margin:17px 0 7px
}
.comparison-card p {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin:0
}
.compare {
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#eee;
  --split:50%;
  touch-action:pan-y
}
.compare img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.compare .before {
  clip-path:inset(0 calc(100% - var(--split)) 0 0)
}
.compare .after {
  clip-path:inset(0 0 0 var(--split))
}
.compare .handle {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--split);
  border-left:2px solid #fff;
  pointer-events:none;
  filter:drop-shadow(0 0 2px #333);
  z-index:2
}
.compare .handle:after {
  content:'↔';
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-50%,-50%);
  background:white;
  color:#222;
  border-radius:50%;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:20px;
  filter:drop-shadow(0 2px 8px #0003)
}
.compare .tag {
  position:absolute;
  bottom:14px;
  padding:7px 10px;
  background:#fff;
  color:#222;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  z-index:3
}
.compare .tag.left {
  left:14px
}
.compare .tag.right {
  right:14px
}
.compare input[type=range] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
  z-index:4;
  margin:0
}
.detail-services {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:60px;
  margin-top:55px
}
.service-item {
  border-top:1px solid var(--line);
  padding:26px 0 42px
}
.service-item .number {
  font-size:10px;
  color:var(--muted);
  letter-spacing:.15em
}
.service-item h3 {
  font-size:clamp(21px,2.3vw,32px);
  font-weight:400;
  letter-spacing:-.035em;
  margin:17px 0
}
.service-item p {
  font-size:13px;
  line-height:1.85;
  color:#666;
  max-width:490px;
  margin:0
}
.profile {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:7%;
  align-items:start;
  padding-top:65px;
  border-top:1px solid var(--line)
}
.profile-photo {
  background:#f1f1ef;
  aspect-ratio:4/4.5;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8a8a86;
  font-size:11px;
  letter-spacing:.14em;
  text-align:center
}
.profile h2 {
  margin-bottom:25px
}
.profile p {
  font-size:14px;
  line-height:1.9;
  color:#666;
  max-width:540px
}
.profile .smallnote {
  font-size:11px;
  color:#888
}
.contact-details {
  margin-top:40px;
  border-top:1px solid var(--line)
}
.contact-details .detail {
  display:grid;
  grid-template-columns:125px 1fr;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding:18px 0;
  font-size:13px
}
.contact-details .detail span:first-child {
  color:#888;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em
}
.contact-details a {
  text-decoration:underline;
  text-underline-offset:4px
}
.placeholder {
  color:#888
}
.section-note {
  font-size:11px;
  color:#888;
  line-height:1.7;
  margin-top:22px
}
.contact {
  margin-bottom:90px
}
.profile-section {
  padding-bottom:120px
}
@media(max-width:700px) {
  nav {
    gap:11px;
    font-size:9px
  }
  .comparison-grid,.detail-services,.profile {
    grid-template-columns:1fr
  }
  .profile {
    gap:28px
  }
  .profile-photo {
    aspect-ratio:5/4
  }
  .profile-section {
    padding-bottom:80px
  }
  .contact-details .detail {
    grid-template-columns:90px 1fr
  }
}
.direct-contact {
  padding-top:8px
}
.contact-label {
  font-size:10px;
  letter-spacing:.16em;
  color:#888;
  margin:0 0 12px
}
.contact-value {
  font-size:clamp(18px,2.2vw,29px)!important;
  color:#171717!important;
  letter-spacing:-.025em;
  margin:0 0 36px!important;
  overflow-wrap:anywhere
}

/* William Lei portrait — replace images/william-lei.svg with your photo */
.profile-photo { overflow: hidden; }
.profile-photo img { display:block; width:100%; height:100%; object-fit:cover; }