@font-face{font-family:ArchivoL22;src:url('../fonts/archivo-var.woff') format('woff');font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:InstrumentL22;src:url('../fonts/instrument-var.woff') format('woff');font-weight:400 700;font-display:swap}
:root{--paper:#F4F2ED;--ink:#231F20;--red:#7E2A2A;--grey:#5C5C5C;--line:#d6d2cc;--pad:clamp(20px,5vw,76px);--display:ArchivoL22,system-ui,sans-serif;--body:InstrumentL22,system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,textarea{font:inherit}button{cursor:pointer}img,svg{display:block;max-width:100%}figure,p,h1,h2,h3{margin:0}button{color:inherit}
::selection{background:var(--red);color:var(--paper)}:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.skip{position:fixed;top:-100px;left:20px;z-index:100;padding:12px;background:var(--paper)}.skip:focus{top:12px}
.case-nav{position:sticky;top:0;z-index:20;background:#0B0B0C;color:#fff;padding:10px clamp(18px,4.5vw,64px);border-bottom:1px solid transparent;font-size:13px}
.case-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1400px;margin-inline:auto}
.case-nav svg{height:clamp(22px,6.6vw,27px);width:auto;fill:currentColor}.case-nav a{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-variation-settings:'wdth' 92,'wght' 700}.case-nav a:focus-visible{outline-color:var(--paper)}
@media(hover:hover) and (pointer:fine){.case-nav svg{height:clamp(17.9px,1.9vw,23.2px)}}
@media(max-width:960px){.case-nav{padding-block:10px}.case-nav__inner{min-height:44px}}
.wrap{max-width:1536px;margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.case-head{padding-top:58px;padding-bottom:36px}
.case-head__meta{display:flex;justify-content:space-between;gap:20px;margin-bottom:25px}
h1{font-family:var(--display);font-variation-settings:'wdth' 105,'wght' 650;font-size:clamp(48px,8.5vw,128px);letter-spacing:-.06em;line-height:1.02}
.case-head__foot{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:24px}.case-head__foot p{font-size:20px;max-width:34ch;line-height:1.4}.case-head__foot span{font-size:13px;color:var(--grey)}
.hero-image{width:100%;height:clamp(300px,32vw,480px);object-fit:cover;object-position:50% 35%}
figcaption{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--grey);padding-top:12px}
.brief{display:grid;grid-template-columns:1fr 2fr 2fr;gap:36px;padding-block:88px 76px;align-items:start}
h2{font-family:var(--display);font-variation-settings:'wdth' 103,'wght' 600;font-size:clamp(32px,3.4vw,52px);line-height:1.08;letter-spacing:-.045em}
.brief__copy p+p{margin-top:18px}.brief__copy p{color:var(--grey);max-width:45ch}
.facts{display:grid;grid-template-columns:1fr 1.65fr 1.15fr;gap:36px;border-block:1px solid var(--line);padding-block:26px 30px;margin:0 0 52px}.facts div{display:grid;align-content:start;gap:10px}.facts dt{font-size:14px;font-weight:500;color:var(--grey)}.facts dd{margin:0;font-size:21px;font-weight:600;line-height:1.4}.facts a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line);text-underline-offset:5px}.facts a:hover{text-decoration-color:var(--red)}.facts a span{color:var(--red);white-space:nowrap}
.brand-signature{display:grid;grid-template-columns:1fr 1fr;min-height:430px;background:#ebe7df}
.brand-signature__copy{display:flex;flex-direction:column;justify-content:space-between;gap:50px;padding:48px}.brand-signature__copy h2{max-width:11ch}.brand-signature__copy p{max-width:37ch;color:var(--grey);font-size:16px}
.logo-display{background:#f4f0e3;display:flex;flex-direction:column;justify-content:center;gap:48px;padding:44px;min-width:0;transition:background .2s,color .2s}
.logo-display svg{width:100%;height:auto;max-width:420px;margin:auto;overflow:hidden}.logo-controls{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.logo-controls button{padding:7px 0;border:0;border-bottom:1px solid transparent;background:transparent;font-size:12px;opacity:.65}.logo-controls button[aria-pressed=true]{border-color:currentColor;opacity:1}
.palette{padding-block:94px 80px}.section-heading{display:grid;grid-template-columns:1fr 2fr 2fr;gap:36px;align-items:start;margin-bottom:38px}.section-heading>p:last-child{color:var(--grey);max-width:40ch}
.palette-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0;min-height:250px}
.palette-band li{display:flex;flex-direction:column;justify-content:space-between;padding:24px;gap:54px}.palette-band b{font-size:19px;font-weight:500}.palette-band span{font-size:12px;line-height:1.5}.palette-cream{background:#eae5d9}.palette-red{background:var(--red);color:var(--paper)}.palette-grey{background:var(--grey);color:white}.palette-black{background:var(--ink);color:var(--paper)}
.palette-note{margin-top:16px;font-size:13px;color:var(--grey)}
.stationery{background:#e7e3dd}.stationery img{width:100%;height:clamp(340px,46vw,640px);object-fit:cover}
.type-section{padding-block:76px 70px}
.type-system{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin:0;border-block:1px solid var(--line);padding-block:28px 32px}
.type-system>div+div{border-left:1px solid var(--line);padding-left:44px}
.type-system dt{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.type-system dt span{display:block;font-family:var(--body);font-size:13px;font-weight:400;letter-spacing:0;color:var(--grey);margin-top:10px}
.type-system dd{margin:22px 0 0;font-size:16px;color:var(--grey);max-width:43ch}
@media(max-width:650px){.type-system{grid-template-columns:1fr;gap:26px}.type-system>div+div{border-left:0;border-top:1px solid var(--line);padding:26px 0 0}.type-system dd{margin-top:16px}}
.outcome{background:var(--ink);color:var(--paper);padding-block:66px}.outcome__grid{display:grid;grid-template-columns:1fr 2fr 2fr;gap:36px}.outcome .eyebrow{color:#beb8b4}.outcome p:last-child{color:#beb8b4;max-width:40ch}.outcome-links{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px}.text-link{display:inline-flex;justify-content:space-between;gap:30px;align-items:center;padding-block:10px;border-bottom:1px solid currentColor;font-size:15px}.text-link span{font-size:20px}.outcome :focus-visible{outline-color:var(--paper)}
.next-project{display:flex;justify-content:space-between;align-items:end;gap:30px;padding-block:48px 54px}.next-project p{font-size:12px;color:var(--grey);margin-bottom:12px}.next-project__title{font-family:var(--display);font-size:clamp(26px,3.2vw,46px);letter-spacing:-.035em;line-height:1.15}.next-project__arrow{font-size:40px;color:var(--red)}
@media(max-width:1000px){.brief,.section-heading,.outcome__grid{grid-template-columns:1fr 1fr}.brief>.eyebrow,.section-heading>.eyebrow,.outcome__grid>.eyebrow{grid-column:1/-1}.case-head{padding-top:42px}.brand-signature__copy{padding:32px}.logo-display{padding:28px}}
@media(max-width:650px){
 .case-head{padding-top:34px;padding-bottom:26px}.case-head__meta{font-size:10px;margin-bottom:22px}.case-head__meta span:last-child{display:none}h1{font-size:clamp(40px,10.4vw,66px);letter-spacing:-.055em}.case-head__foot{display:block;margin-top:20px}.case-head__foot p{font-size:18px}.case-head__foot span{display:block;margin-top:18px;font-size:12px}.hero-image{height:auto;aspect-ratio:1;object-fit:cover;object-position:60% center}figcaption{font-size:11px}figcaption span+span{display:none}
 .brief,.section-heading,.outcome__grid{grid-template-columns:1fr;gap:22px}.brief{padding-block:52px 40px}.brief__copy p{font-size:16px}.facts{grid-template-columns:1fr;gap:24px;padding-block:24px;margin-bottom:42px}.facts div{grid-template-columns:1fr;gap:6px}.facts dd{font-size:19px}
 .brand-signature{grid-template-columns:1fr;min-height:0}.brand-signature__copy{padding:28px;gap:24px}.brand-signature__copy h2{max-width:none}.logo-display{min-height:240px;padding:30px 20px;gap:34px}.palette{padding-block:52px}.section-heading{margin-bottom:26px}.section-heading>p:last-child{font-size:16px}.palette-band{grid-template-columns:1fr 1fr;min-height:0}.palette-band li{padding:20px;min-height:180px;gap:30px}.palette-band b{font-size:18px}.stationery img{height:auto;aspect-ratio:1;object-fit:cover}.type-section{padding-block:52px}.outcome{padding-block:45px}.outcome-links{gap:16px;flex-direction:column;align-items:flex-start}.next-project{padding-block:35px 42px}
}
/* Quiet motion: native scroll timelines, with a fully visible static baseline. */
.case-head__aside{display:grid;justify-items:end;gap:10px}
.explore-link{display:inline-flex;align-items:center;gap:22px;min-height:44px;font-size:13px;border-bottom:1px solid var(--line)}
.case-head__foot .explore-link span{margin:0;color:var(--red);font-size:20px}
.image-stage,.stationery{overflow:clip;isolation:isolate}
.stationery img{height:auto;aspect-ratio:3/2;object-fit:contain}
.logo-display{transition:color .2s}
.logo-controls button{min-height:44px;transition:color .2s,opacity .2s,border-color .2s}
.logo-controls button{opacity:.8}
.text-link span,.explore-link span,.next-project__arrow{transition:transform .35s cubic-bezier(.2,.65,.3,1)}
.next-project__title{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:8px;transition:text-decoration-color .25s}
@media(hover:hover){
 .logo-controls button:hover{opacity:1;border-bottom-color:currentColor}
 
 .text-link:hover span{transform:translate(3px,-3px)}
 .explore-link:hover span{transform:translateY(4px)}
 .next-project:hover>span{transform:translate(4px,-4px)}
 .next-project:hover .next-project__title{text-decoration-color:currentColor}
}
.text-link:focus-visible span{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:no-preference){
 .reveal-pending{opacity:0;transform:translateY(32px)}
 @supports ((animation-timeline:view()) and (animation-range:entry)){
  @keyframes case-arrive{from{opacity:.18;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  .palette-band{
   animation:case-arrive linear both;
   animation-timeline:view();
   animation-range:entry 0% entry 70%;
  }
  @keyframes case-reading{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .case-nav::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:#d9bdb0;transform-origin:left;animation:case-reading linear both;animation-timeline:scroll(root block)}
 }
 @media(min-width:1001px){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
   .palette-band{animation:none;view-timeline:--palette-entry block}
   .palette-band li{animation:case-arrive linear both;animation-timeline:--palette-entry;animation-range:entry 0% entry 40%}
   .palette-band li:nth-child(2){animation-range:entry 8% entry 48%}
   .palette-band li:nth-child(3){animation-range:entry 16% entry 56%}
   .palette-band li:nth-child(4){animation-range:entry 24% entry 64%}
  }
 }
}
@media(max-width:650px){.case-head__aside{justify-items:start;gap:4px}.case-head__foot .case-head__aside>span{margin-top:16px}.explore-link{gap:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.case-nav,.logo-display,.logo-controls button,.text-link span,.explore-link span,.next-project__arrow,.next-project__title{transition:none;transform:none}}
@media print{.case-nav,.explore-link,.logo-controls{display:none}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;transform:none}.outcome{background:transparent;color:var(--ink)}}

/* The same case-study structure, with each project's own palette and artwork. */
.project-nika{--red:#77624f}.project-moissury{--red:#59634b}
.keep-together{white-space:nowrap}
.project-nika .hero-image,.project-moissury .hero-image{object-position:50% 50%}
.project-feature{display:grid;grid-template-columns:1fr 1.65fr;align-items:center;gap:clamp(32px,5vw,76px);padding-block:16px 0}
.project-feature__copy{display:grid;gap:22px;max-width:39ch}
.project-feature__copy>p:last-child{color:var(--grey);font-size:16px}
.project-feature .image-stage img{width:100%;height:auto}
.palette-three{grid-template-columns:repeat(3,minmax(0,1fr));min-height:220px}
.facts+.palette{padding-top:24px}
.palette-three li{color:var(--ink)}
.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.project-gallery img{width:100%;aspect-ratio:6/5;height:auto;object-fit:cover;object-position:50% 55%}
.project-applications{padding-bottom:78px}
.project-feature--application{padding-bottom:40px}
.project-source{border-block:1px solid var(--line);margin-bottom:76px}
.project-source summary{display:flex;align-items:center;justify-content:space-between;gap:24px;list-style:none;cursor:pointer;min-height:66px;font-size:16px}
.project-source summary::-webkit-details-marker{display:none}
.project-source summary>span{font-size:24px;color:var(--red)}
.project-source[open] summary>span{transform:rotate(45deg)}
.project-source>div{padding-bottom:32px;max-width:760px;margin-inline:auto}
.project-source img{width:100%;height:auto}
.next-project:focus-visible .next-project__arrow{transform:translate(4px,-4px)}
@media(max-width:800px){
 .project-feature{grid-template-columns:1fr;gap:28px}.project-feature__copy{max-width:48ch}
 .project-gallery{gap:20px}
 .project-applications{padding-bottom:52px}.project-source{margin-bottom:52px}
}
@media(max-width:650px){
 .palette-three{grid-template-columns:1fr}.palette-three li{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:18px 20px;min-height:100px;gap:16px}.palette-three b{font-size:18px}.palette-three span{font-size:12px}
 .project-gallery{grid-template-columns:1fr;gap:28px}.project-gallery img{aspect-ratio:1}
 .project-nika .hero-image,.project-moissury .hero-image{aspect-ratio:4/3}
 .project-nika h1{font-size:clamp(34px,9.5vw,62px)}
}
