:root{
  color-scheme:light;
  --bg:#F9F8F3; --ink:#1D1D1F; --muted:#5B5B5B; --line:rgba(29,29,31,.14);
  --serif:'Marcellus SC',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gap:clamp(40px,5.5vw,80px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.page{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,56px) clamp(20px,6vw,120px);display:flex;flex-direction:column;gap:var(--gap)}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--serif);font-size:clamp(32px,4.5vw,48px);line-height:1;color:var(--ink)}
.brand:hover{color:var(--ink)}
.nav ul{display:flex;gap:clamp(20px,4.5vw,48px);list-style:none;margin:0;padding:0;font-weight:600;font-size:clamp(15px,1.9vw,20px)}
.nav nav a{color:var(--muted);transition:color .2s}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ink)}
/* hero */
  .hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:clamp(420px,52vh,610px);padding:clamp(28px,5vw,58px) 0;overflow:hidden;border-radius:30px;cursor:url("../images/index/img1.png") 2 24, auto;isolation:isolate}
  .paint-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
  .hero-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:24px;max-width:760px;padding:20px 28px;background:rgba(249,248,243,.30);border-radius:28px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:none}
  h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,9vw,96px);line-height:1.1;margin:0}
  .hero p{margin:0;max-width:584px;font-weight:500;font-size:clamp(16px,1.8vw,18px);line-height:1.5;color:var(--muted)}
  @media (max-width:700px){
    .hero{min-height:390px;cursor:auto;border-radius:22px}
    .hero-copy{padding:18px 18px;border-radius:22px;background:rgba(249,248,243,.44)}
  }

/* tiles */
.work{display:flex;flex-direction:column;gap:var(--gap)}
.tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(32px,8vw,80px);
  padding:clamp(32px,9vw,85px) clamp(20px,7.5vw,70px);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 4px 20px rgba(29,29,31,.04);
  transition:transform .35s cubic-bezier(0.2, 0.8, 0.2, 1),box-shadow .35s cubic-bezier(0.2, 0.8, 0.2, 1),border-color .35s ease;
  cursor:pointer;
}
.tile:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -10px rgba(29,29,31,.12),0 8px 18px -4px rgba(29,29,31,.06);
  border-color:rgba(255,255,255,0.95);
}
.tile:active{
  transform:translateY(-2px) scale(0.995);
  box-shadow:0 10px 24px -4px rgba(29,29,31,.10);
  transition-duration:.1s;
}
.shot-wrap{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shot{
  width:100%;
  height:100%;
  aspect-ratio:2/1;
  object-fit:contain;
  border-radius:16px;
  display:block;
  transition:transform .5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin:center center;
}
.t1 .shot{object-fit:cover}
.tile:hover .shot{
  transform:scale(1.025);
}
.tile:active .shot{
  transform:scale(1.008);
}
.info{display:flex;flex-direction:column;gap:16px;line-height:1.5}
.eyebrow{font-size:16px;font-weight:600;text-transform:uppercase;margin:0;letter-spacing:0.04em}
.info h2{
  font-size:clamp(22px,3.6vw,32px);
  font-weight:700;
  margin:0;
  line-height:1.4;
  transition:color .25s ease;
}
.meta{font-size:16px;font-weight:600;margin:0}
.tile-cta{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:8px;
  margin-top:6px;
  padding:10px 20px;
  border-radius:999px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 2px 8px rgba(29,29,31,.05);
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.01em;
  transition:transform .3s cubic-bezier(0.2, 0.8, 0.2, 1),background-color .3s ease,box-shadow .3s ease;
  white-space:nowrap;
}
.tile:hover .tile-cta{
  background:#ffffff;
  box-shadow:0 6px 18px rgba(29,29,31,.12);
  transform:translateX(3px);
}
.tile:active .tile-cta{
  transform:scale(0.97);
}
.cta-arrow{
  width:16px;
  height:16px;
  display:inline-block;
  flex-shrink:0;
  transition:transform .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tile:hover .cta-arrow{
  transform:translateX(4px);
}
.t3:hover .cta-arrow{
  transform:translate(3px, -3px);
}

.t1{background:#D3CCFF}.t1 .eyebrow{color:#4E3EAF}.t1 .tile-cta{color:#4E3EAF}.t1:hover h2{color:#352599}
.t2{background:#C2F6C5}.t2 .eyebrow{color:#207B19}.t2 .tile-cta{color:#207B19}.t2:hover h2{color:#135c0e}
.t3{background:#CBE3FF}.t3 .eyebrow{color:#394FBA}.t3 .tile-cta{color:#394FBA}.t3:hover h2{color:#23358c}

/* footer */
footer{display:flex;flex-direction:column;gap:40px;color:var(--muted);font-size:16px}
footer hr{border:0;border-top:1px solid var(--line);margin:0;width:100%}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 48px}
.foot p{margin:0;font-weight:600;line-height:1.5}
.foot ul{display:flex;flex-wrap:wrap;gap:12px 48px;list-style:none;margin:0;padding:0;font-weight:500}
.foot a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.foot a:hover{color:var(--ink)}
:focus-visible{outline:2px solid #4E3EAF;outline-offset:3px;border-radius:4px}
@media (max-width:560px){.foot{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tile,.tile:hover,.tile:active,.shot,.tile:hover .shot,.tile-cta,.tile:hover .tile-cta,.cta-arrow,.tile:hover .cta-arrow{
    transition:none;
    transform:none;
  }
  .hero{cursor:auto}
}