@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --accent:#1E8C8C;
  --bg:#ffffff;
  --muted:#f6f6f6;
  --text:#121212;
  --sub:#5a5a5a;
  --max:1200px;
  --r:10px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

/* Header */
.header-wrap{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{ font-weight:700; letter-spacing:0.01em; }

nav ul{ list-style:none; display:flex; gap:16px; }
nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  position:relative;
}
nav a:hover{ color:var(--accent); }

/* Layout */
.container{
  max-width:var(--max);
  margin:44px auto;
  padding:0 16px;
}

.page-heading{
  font-size:34px;
  font-weight:800;
  letter-spacing:0.04em;
}

.lead{
  margin-top:8px;
  color:var(--sub);
  max-width:60ch;
}

/* Grid */
.projects-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

/* Card */
.project-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--muted);
  aspect-ratio:4/3;
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
}

.card-link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}

/* Media */
.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  filter:saturate(0.98);
  transition:transform 520ms ease, filter 520ms ease;
}

/* Overlay */
.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px;
  background:linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.62) 100%);
  transition:background 520ms ease;
}

.hook{
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,0.92);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 420ms ease, transform 420ms ease;
}

.title{
  margin-top:4px;
  font-size:16px;
  font-weight:800;
  letter-spacing:0.05em;
  color:white;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 420ms ease, transform 420ms ease;
}

.project-card:hover img{
  transform:scale(1.06);
  filter:saturate(1) brightness(0.92);
}

.project-card:hover .hook,
.project-card:hover .title{
  opacity:1;
  transform:none;
}

/* Keyboard focus */
.card-link:focus-visible{
  outline:3px solid rgba(30,140,140,0.55);
  outline-offset:3px;
  border-radius:calc(var(--r) + 2px);
}

/* Contact tile */
.contact-card{
  background:linear-gradient(180deg, rgba(30,140,140,0.22), rgba(30,140,140,0.45));
}

.contact-text{
  margin-top:10px;
  color:white;
  font-weight:600;
  line-height:1.55;
}

.contact-text a{
  color:white;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.35);
}
.contact-text a:hover{
  border-bottom-color:rgba(255,255,255,0.9);
}

/* Case study */
.case-hook{
  color:var(--accent);
  font-weight:800;
  letter-spacing:0.05em;
  margin-bottom:8px;
}

.case-title{
  font-size:30px;
  font-weight:900;
  letter-spacing:0.04em;
}

.project-meta{
  margin-top:10px;
  color:var(--sub);
}

.project-images{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}

.project-images figure{ margin:0; }
.project-images img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--r);
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
}

.project-description{
  margin-top:18px;
  max-width:70ch;
  color:#444;
}

.project-nav{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,0.06);
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.project-nav a{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}
.project-nav a:hover{ color:var(--accent); }

/* Footer */
.site-footer{
  padding:26px 16px;
  border-top:1px solid rgba(0,0,0,0.06);
  text-align:center;
  color:#6b6b6b;
}
.site-footer a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(30,140,140,0.3);
}
.site-footer a:hover{
  border-bottom-color:rgba(30,140,140,0.85);
}

/* Mobile */
@media (max-width: 640px){
  .container{ margin:32px auto; }
  .page-heading{ font-size:28px; }
  .case-title{ font-size:24px; }
}


/* Durex (RED): keep gallery images uniform */
.equal-images figure{
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--r);
}
.equal-images img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}