/* Shared v2 layer for the case study pages (ocr, afirmo, ai).
   Loaded after each page's own <style>, so it overrides with the same specificity. */
:root{--display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;--sheet:#fffdf8;--cream:#fbfaf6;--accent:#f04f3d;--accent-soft:#f7d6cf;--body:#4c5a52;--ease:cubic-bezier(.2,.8,.2,1)}

/* Type: Bricolage Grotesque for headings, statements, numbers and labels; body copy and controls stay on Helvetica */
h1,.section h2,.opportunity-title,.sticky h3,.turn p,.reflection p,.opportunity-close p,.section-bridge p,.decision-close p,.quote p,.stat-primary b,.stat-secondary b,.metric b,.point h4,.card-copy h3,.evolution-copy h3,.iteration-copy h3,.decision-copy h3,.prototype-copy h3,.outcome-film-copy h3,.media-copy h3,.ba-set h3{font-family:var(--display);font-weight:700}
h1{letter-spacing:-.05em}
.section h2,.opportunity-title,.turn p,.reflection p{letter-spacing:-.042em}
.sticky h3,.stat-secondary b,.metric b{letter-spacing:-.04em}
.stat-primary b{letter-spacing:-.05em}
.stat-primary strong{font-family:var(--display);font-weight:700;letter-spacing:-.015em}
.opportunity-close p,.section-bridge p,.decision-close p,.quote p{letter-spacing:-.025em}
.point h4,.card-copy h3,.evolution-copy h3,.iteration-copy h3,.decision-copy h3,.prototype-copy h3,.outcome-film-copy h3,.media-copy h3,.ba-set h3{letter-spacing:-.02em}
.kicker,.meta b,.point small,.card-copy small,.flow-label,.evolution-copy small,.iteration-copy small,.decision-copy small,.prototype-copy small,.outcome-film-copy small,.principle small,.customer-feedback-label,.procon b,.media-copy small,.prompt small,.takeaway small,.trio figcaption,.pair figcaption,.duo figcaption{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:0;text-transform:none}
.choice-badge,.ba figcaption,.decision-visual-grid figcaption,.surface-visual-grid figcaption{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:0;text-transform:none}

/* Back to the homepage: one button instead of the homepage's section nav */
.back-home{position:fixed;z-index:100;top:16px;left:clamp(12px,3vw,40px);display:inline-flex;align-items:center;gap:8px;padding:11px 18px 11px 15px;border-radius:999px;background:rgba(255,253,248,.9);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 0 0 1px rgba(24,36,30,.07),0 12px 32px rgba(24,36,30,.13);font-size:.86rem;font-weight:750;color:var(--ink);transition:background-color .2s ease,color .2s ease}
.back-home span{transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.back-home:hover{background:var(--ink);color:var(--cream)}.back-home:hover span{transform:translateX(-3px)}}

/* Type scale that sits with the homepage */
.hero{min-height:min(84svh,820px);padding-top:140px}
h1{font-size:clamp(2.8rem,6vw,6rem);line-height:.95}
.section h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1}
.turn p,.reflection p,.opportunity-title{font-size:clamp(2.4rem,4.6vw,4.8rem);line-height:1.02}
.sticky h3{font-size:clamp(1.8rem,3vw,3.2rem)}
.stat-primary b{font-size:clamp(4rem,8vw,8rem)}
.stat-secondary b{font-size:clamp(2.8rem,5vw,5rem)}
.metric b{font-size:clamp(2.4rem,4vw,4rem)}
.opportunity-close p{font-size:clamp(1.6rem,2.6vw,2.6rem)}
.section-bridge p{font-size:clamp(1.5rem,2.4vw,2.3rem)}
.decision-close p,.quote p{font-size:clamp(1.4rem,2.2vw,2.1rem)}
@media(max-width:699px){.hero{padding-top:84px}}
@media(max-width:620px){h1{font-size:clamp(2.5rem,11vw,4rem)}}

/* More work: the homepage folders for the other two case studies */
.more-work{padding:clamp(96px,11vw,150px) clamp(16px,4.7vw,72px) clamp(110px,12vw,160px)}
.folders{--gap:clamp(20px,2.4vw,34px);max-width:780px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px var(--gap)}
.folder{position:relative;display:flex;flex-direction:column}
.folder-docs{position:relative;aspect-ratio:1.62;pointer-events:none}
.doc{position:absolute;margin:0;height:auto;border:5px solid #fff;border-radius:13px;background:#fff;object-fit:cover;box-shadow:0 1px 2px rgba(24,36,30,.12),0 14px 30px rgba(24,36,30,.16);transition:transform .7s var(--ease)}
.doc-back{left:1%;bottom:-6%;width:66%;aspect-ratio:1.72;transform:rotate(-5deg)}
.doc-front{right:2%;bottom:-34%;width:50%;aspect-ratio:4/5;transform:rotate(4deg)}
.folder-front{position:relative;flex:1;display:flex;flex-direction:column;filter:drop-shadow(0 1px 1px rgba(24,36,30,.08)) drop-shadow(0 18px 28px rgba(24,36,30,.12))}
.folder-tab{position:absolute;left:0;bottom:calc(100% - 1px);display:flex;align-items:center;height:40px;width:46%;min-width:128px;padding:4px 0 0 22px;background:var(--sheet);border-radius:16px 0 0 0}
.folder-tab svg{position:absolute;left:calc(100% - 1px);bottom:0;width:44px;height:40px;fill:var(--sheet)}
.folder-tab .eyebrow{font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--muted)}
.folder-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:20px 24px 24px;background:var(--sheet);border-radius:0 22px 22px 22px}
.folder h3{margin:0 0 12px;font-family:var(--display);font-size:clamp(1.45rem,1.95vw,1.95rem);line-height:1.02;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.folder p{margin:0 0 26px;font-size:1rem;line-height:1.55;color:var(--body)}
.folder .btn{margin-top:auto}
.card-hit{position:absolute;inset:0;z-index:2;border-radius:22px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:.92rem;font-weight:800;transition:background-color .25s ease}.btn i{font-style:normal;transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.folder:hover .doc-back{transform:translate(-6px,-12px) rotate(-7.5deg)}.folder:hover .doc-front{transform:translate(8px,-22px) rotate(6.5deg)}.folder:hover .btn{background:var(--accent)}.folder:hover .btn i{transform:translateX(5px)}}
@media(max-width:699px){.folders{grid-template-columns:1fr;max-width:460px;gap:48px}}

/* Footer: the same Let's talk block as the homepage */
.contact{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);padding:clamp(96px,11vw,150px) clamp(16px,4.7vw,72px) 0}
.contact-inner{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,6vw,96px);align-items:center}
.contact h2{margin:0 0 24px;font-family:var(--display);font-size:clamp(3.6rem,7.6vw,8rem);line-height:.86;letter-spacing:-.055em;font-weight:700;color:var(--cream)}
.contact-copy p{margin:0 0 42px;max-width:520px;font-size:clamp(1.12rem,1.6vw,1.42rem);line-height:1.5;color:#c3ccc5}
.contact-links{list-style:none;margin:0;padding:0;max-width:440px;border-top:1px solid rgba(251,250,246,.16)}
.contact-links a{display:flex;justify-content:space-between;align-items:center;padding:18px 2px;border-bottom:1px solid rgba(251,250,246,.16);font-size:1.1rem;font-weight:750;color:var(--cream);transition:color .2s ease,padding-left .35s var(--ease)}.contact-links a span{transition:transform .35s var(--ease)}
@media(hover:hover) and (pointer:fine){.contact-links a:hover{color:var(--accent-soft);padding-left:10px}.contact-links a:hover span{transform:translate(3px,-3px)}}
.photos{justify-self:center;width:min(350px,86%)}
.polaroid{margin:0;padding:14px 14px 58px;background:var(--sheet);box-shadow:0 2px 4px rgba(0,0,0,.2),0 34px 80px rgba(0,0,0,.4);transform:rotate(3.5deg)}.polaroid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.footer-meta{max-width:1220px;margin:clamp(72px,8vw,110px) auto 0;padding:22px 0 30px;border-top:1px solid rgba(251,250,246,.12);font-size:.84rem;color:#8f9c94}
@media(max-width:899px){.contact-inner{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}
@media(max-width:699px){.contact-inner{grid-template-columns:1fr}.photos{order:-1;width:min(290px,78%)}}