/* ===== FIELD REFERENCE — shared case-study styles ===== */
:root{
  --bg:#F3F2ED; --ink:#101010; --dark:#101010; --on-dark:#F3F2ED; --grey:#77766F;
  --line:rgba(16,16,16,0.18); --line-dark:rgba(243,242,237,0.16); --acid:#C6FF3D; --ph:#E6E5DF;
  --sans:Arial,'Helvetica Neue',Helvetica,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --serif:'Instrument Serif',Georgia,serif; --ease:cubic-bezier(.22,1,.36,1); --gut:clamp(24px,5vw,48px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;} html,body{overflow-x:hidden;}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;}
::selection{background:var(--ink); color:var(--bg);}
a{color:inherit; text-decoration:none;} img{display:block; max-width:100%;}
.serif{font-family:var(--serif); font-style:italic; font-weight:400;}
.meta{font-family:var(--mono); font-size:clamp(.66rem,.82vw,.75rem); letter-spacing:.14em; text-transform:uppercase; color:var(--grey);}
.edge{padding-inline:var(--gut);}
.full{width:100vw; margin-left:calc(50% - 50vw);}
.measure{max-width:760px;}
a:focus-visible,button:focus-visible{outline:2px solid var(--acid); outline-offset:3px;}

/* image fallback */
.figure{position:relative; background:var(--ph); overflow:hidden;}
.figure::after{content:attr(data-ph); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); text-align:center; padding:1.2rem;}
.figure img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover;}

/* header */
header{position:fixed; inset:0 0 auto 0; z-index:100; border-bottom:1px solid transparent; transition:background .4s var(--ease), border-color .4s;}
header.scrolled{background:rgba(243,242,237,.9); backdrop-filter:blur(6px); border-color:var(--line);}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.05rem;}
.brand{font-family:var(--mono); font-weight:700; font-size:.9rem; letter-spacing:.22em; color:var(--ink);}
.brand-dot{color:var(--acid);}
.back{font-family:var(--mono); font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); display:inline-flex; gap:.5rem; align-items:center;}
.back .arr{transition:transform .25s var(--ease);}
.back:hover .arr{transform:translateX(-3px);}

/* hero */
.case-hero{position:relative; min-height:84svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--on-dark);}
.case-hero .bg{position:absolute; inset:0; z-index:0;}
.case-hero .bg img{width:100%; height:100%; object-fit:cover;}
.case-hero .scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,16,16,.15) 0%, rgba(16,16,16,0) 35%, rgba(16,16,16,.75) 100%);}
.case-hero .inner{position:relative; z-index:2; width:100%; padding-top:7rem; padding-bottom:clamp(2.5rem,6vw,4.5rem);}
.case-hero .eyebrow{color:rgba(243,242,237,.82); margin-bottom:1rem;}
.case-title{font-weight:400; font-size:clamp(2.2rem,6vw,5rem); line-height:1.02; letter-spacing:-.03em; max-width:20ch;}
.case-title .serif{font-size:1.05em;}

/* meta bar */
.metabar{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.5vw,32px);
  padding-block:clamp(1.6rem,3vw,2.4rem); border-bottom:1px solid var(--line);}
.metacol .k{display:block; margin-bottom:.5rem;}
.metacol .v{font-size:1rem;}

/* body / prose */
.prose{padding-block:clamp(3.5rem,8vw,6rem);}
.prose .measure > * + *{margin-top:1.3rem;}
.prose .lead{font-size:clamp(1.35rem,2.6vw,2rem); line-height:1.3; letter-spacing:-.01em; color:var(--ink);}
.prose h2{font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
  margin-top:clamp(2.4rem,5vw,3.4rem)!important; margin-bottom:.2rem;}
.prose p{font-size:clamp(1.02rem,1.3vw,1.12rem); color:var(--ink);}
.prose p.muted{color:var(--grey);}
.placeholder-note{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--grey);
  border:1px dashed var(--line); border-radius:8px; padding:.7rem 1rem; display:inline-block;}
.pull{font-weight:400; font-size:clamp(1.6rem,3.6vw,2.8rem); line-height:1.16; letter-spacing:-.02em;
  max-width:22ch; margin-block:clamp(2.6rem,6vw,4rem)!important;}
.pull .serif{color:var(--grey);}

/* impact stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.5vw,32px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:clamp(1.8rem,4vw,2.6rem);}
.stat .n{display:block; font-size:clamp(1.9rem,4.4vw,3.2rem); letter-spacing:-.02em; line-height:1;}
.stat .l{display:block; margin-top:.55rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey);}

/* partners + press */
.partners{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.6rem;}
.partners span{font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--ink); border:1px solid var(--line); border-radius:100px; padding:.3rem .7rem;}
.presslist{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:.8rem;}
.presslist a{font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:.15rem; display:inline-flex; gap:.4rem;}
.presslist a:hover{border-color:var(--ink);}
.presslist a .arr{color:var(--acid);}

/* gallery */
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,24px); padding-bottom:clamp(3rem,7vw,5rem);}
.gallery .figure{aspect-ratio:4/5;}
.gallery .wide{grid-column:1 / -1; aspect-ratio:16/9;}

/* next / cta */
.nextnav{border-top:1px solid var(--line); padding-block:clamp(3rem,7vw,5rem); display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:1rem;}
.nextnav .next-hl{font-weight:400; font-size:clamp(1.6rem,4vw,2.8rem); letter-spacing:-.02em;}
.nextnav a.next{display:inline-flex; align-items:center; gap:.6rem;}
.nextnav a.next .arr{transition:transform .25s var(--ease); color:var(--acid);}
.nextnav a.next:hover .arr{transform:translateX(4px);}

footer{background:var(--dark); color:rgba(243,242,237,.6); border-top:1px solid var(--line-dark);}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; align-items:center; padding-block:2.2rem;}
.foot .brand-foot{font-family:var(--mono); font-weight:700; letter-spacing:.2em; color:var(--on-dark); font-size:.9rem;}
.foot a:hover{color:var(--on-dark);}

@media(max-width:760px){
  .metabar{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr;}
  .gallery .figure, .gallery .wide{aspect-ratio:4/5;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; scroll-behavior:auto!important;}}
