/* Case-study pages — Guy Roberts portfolio */
:root{
  --bg:#e9e5dc; --bg-2:#e2ddd2; --ink:#0c0c0d; --ink-dim:#6b675f;
  --line:rgba(12,12,13,.14); --accent:#aec323; --accent-2:#6f7e0f; --accent-3:#c8d95a;
  --maxw:1440px; --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--ink)}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.95}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-dim);
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--accent-2);flex:none}

/* nav */
header.nav{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;justify-content:space-between;
  align-items:center;padding:20px clamp(20px,4vw,52px);mix-blend-mode:difference;color:#fff}
.nav .logo{font-family:'Bricolage Grotesque';font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
.nav .logo b{width:11px;height:11px;border-radius:50%;background:var(--accent);mix-blend-mode:normal}
.nav nav{display:flex;gap:8px;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em}
.nav nav a{padding:8px 14px;border:1px solid rgba(255,255,255,.25);border-radius:30px;transition:.4s var(--ease)}
.nav nav a:hover{background:#fff;color:#000}

/* hero */
.c-hero{padding:18vh 0 0}
.c-hero h1{font-size:clamp(2.8rem,9vw,8rem);text-transform:uppercase;margin:1.4rem 0 0}
.c-hero .client{font-family:'Bricolage Grotesque';font-weight:600;font-size:clamp(1rem,2vw,1.3rem);
  color:var(--accent-2);margin-top:1.2rem}
.c-lead{font-family:'Bricolage Grotesque';font-weight:600;font-size:clamp(1.4rem,3.2vw,2.6rem);
  line-height:1.16;letter-spacing:-.02em;max-width:24ch;margin:2.6rem 0 0}
.c-meta{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap;margin:4rem 0 0;
  border-top:2px solid var(--ink);padding-top:1.6rem}
.c-meta .m h4{font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-dim);margin-bottom:.7rem}
.c-meta .m p{font-size:.95rem;max-width:30ch}
.c-meta .m .chips{display:flex;flex-wrap:wrap;gap:7px}
.c-meta .m .chips span{font-size:.78rem;border:1px solid var(--line);padding:6px 12px;border-radius:30px}

/* stats */
.c-stats{display:flex;gap:clamp(28px,6vw,90px);flex-wrap:wrap;margin:3rem 0 0}
.c-stats b{font-family:'Bricolage Grotesque';font-size:clamp(2rem,5vw,3.4rem);font-weight:800;display:block;line-height:1}
.c-stats span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim)}

/* body copy */
.c-body{max-width:62ch;margin:clamp(70px,10vh,120px) auto 0;padding:0 clamp(20px,4vw,52px)}
.c-body p{font-size:clamp(1.05rem,1.6vw,1.3rem);color:#26241f;margin-bottom:1.5rem}
.c-body p:first-child::first-letter{font-family:'Bricolage Grotesque';font-weight:800;font-size:3.4em;
  float:left;line-height:.78;padding:.06em .12em 0 0;color:var(--accent-2)}

/* gallery — art-directed mosaic */
.c-gallery{margin:clamp(70px,10vh,130px) auto 0;display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(60px,8vw,118px);gap:clamp(14px,2.2vw,32px)}
.c-gallery figure{position:relative;overflow:hidden;border-radius:14px;background:var(--bg-2);
  grid-column:span 12;grid-row:span 4}
.c-gallery img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.1s var(--ease)}
.c-gallery figure:hover img{transform:scale(1.04)}
@media(max-width:760px){
  .c-gallery{display:block}
  .c-gallery figure{grid-column:auto!important;grid-row:auto!important;margin-bottom:clamp(14px,4vw,22px)}
  .c-gallery img{height:auto}
}
.c-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-top:clamp(40px,6vh,80px)}
.c-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* self-hosted project films — pinned scroll-expand (matches homepage showreel) */
.v-stage{position:relative;width:100%;height:155vh;margin:clamp(60px,9vh,120px) 0}
.v-pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:var(--bg)}
.v-clip{position:absolute;inset:0;clip-path:inset(16vh 14vw round 20px);will-change:clip-path}
.v-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
  .v-stage{height:auto;margin:clamp(34px,8vw,60px) 0}
  .v-pin{position:relative;height:auto}
  .v-clip{position:relative;clip-path:none!important;border-radius:14px;overflow:hidden}
  .v-clip video{position:relative;height:auto}
}
@media(prefers-reduced-motion:reduce){
  .v-stage{height:auto}
  .v-pin{position:relative;height:auto}
  .v-clip{position:relative;clip-path:none!important;border-radius:14px;overflow:hidden}
  .v-clip video{position:relative;height:auto}
}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* next / footer */
.c-next{display:block;border-top:2px solid var(--ink);margin-top:clamp(80px,12vh,160px);
  padding:clamp(50px,8vh,90px) 0;transition:background .4s var(--ease)}
.c-next:hover{background:var(--ink);color:var(--bg)}
.c-next .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.c-next small{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-dim)}
.c-next h2{font-size:clamp(2rem,6vw,4.6rem);text-transform:uppercase;margin-top:.6rem}
.c-next:hover small{color:rgba(233,229,220,.6)}
.c-next .arr{font-size:clamp(2rem,6vw,4rem)}
footer{border-top:2px solid var(--ink);padding:30px 0}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;
  color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}