/* The home page's Work section and the case studies. Both are dark at every hour: the work is
   the light source. Motion preference is the home page's switch, html[data-motion]. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.work-index,body.case-page{--bg:#1a1a18;--surface:#242421;--text:#f3f1eb;--muted:#b3b2aa;--border:#4b4b45;--accent:#f3f1eb;--accent-text:#1a1a18;--ease-out:cubic-bezier(.16,1,.3,1);color-scheme:dark;background:var(--bg);color:var(--text)}
.case-amparibe{--tone:#e9dfc8;--tone-ink:#2a2317;--case-accent:#c9a558}
.case-maren{--tone:#f1e7d8;--tone-ink:#2a160c;--case-accent:#d39a5c}
.case-shift{--tone:#ed3933;--tone-ink:#151617;--case-accent:#ff5a52}
.case-wedding{--tone:#e3e9ef;--tone-ink:#1d2a44;--case-accent:#d9603c}

/* The image travels: whichever picture is live on the page that is left becomes the cover
   of the page that opens. Two elements must never hold the name at once, or the browser
   drops the whole transition. */
.work-plane.is-active,.is-leaving>img,.case-cover{view-transition-name:work-hero}
body.is-leaving .case-cover{view-transition-name:none}
::view-transition-group(work-hero){animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.2,1)}
::view-transition-old(work-hero),::view-transition-new(work-hero){height:100%;object-fit:cover}
::view-transition-old(root){animation:work-out .3s both}
::view-transition-new(root){animation:work-in .55s .3s both}
@keyframes work-out{to{opacity:0}}
@keyframes work-in{from{opacity:0}}
.work-veil{position:fixed;inset:0;z-index:90;background:#1a1a18;pointer-events:none}

/* The Work section, on the home page. The picture window is fixed to the screen, and
   clip-path keeps it inside the section: without it the window would hang over whatever
   section is next to this one while a title near the edge is hovered. */
.work-index{position:relative;scroll-margin-top:0;clip-path:inset(0);padding:clamp(70px,8vw,130px) 0 clamp(80px,9vw,150px)}
.work-intro{position:relative;z-index:2;max-width:1600px;margin-inline:auto;padding:0 48px clamp(44px,5vw,76px);display:grid;grid-template-columns:auto 1fr;align-items:end;gap:8px 70px}
.work-intro .section-index{grid-column:1/-1;margin-bottom:14px;color:var(--muted)}
.work-intro h2{font-size:clamp(56px,8.4vw,150px);line-height:.92;letter-spacing:-.07em}
.work-intro>p:last-child{font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--muted);max-width:38ch;padding-bottom:.6em}
.work-list{position:relative;z-index:2;list-style:none;margin:0;padding:0}
.work-row{border-top:1px solid var(--border)}
.work-row:last-child{border-bottom:1px solid var(--border)}
.work-link{display:block;position:relative;overflow:hidden;padding:20px 0 6px}
.work-meta{display:flex;gap:30px;padding-inline:48px;font-size:11px;text-transform:uppercase;letter-spacing:.045em;color:var(--muted)}
.work-track{display:flex;width:max-content;gap:.34em;padding-right:.34em;font-size:clamp(84px,15.5vw,290px);line-height:1.02;letter-spacing:-.07em;white-space:nowrap;animation:work-drift 44s linear infinite;transition:opacity .45s var(--ease)}
.work-row:nth-child(even) .work-track{animation-direction:reverse}
.work-name::after{content:'↗';display:inline-block;font-size:.3em;vertical-align:1.25em;margin-left:.25em;letter-spacing:0;color:var(--muted)}
@keyframes work-drift{to{transform:translateX(calc(-100% / 3))}}
html[data-motion="off"] .work-track{animation:none}
.work-list:has(.work-link:hover) .work-link:not(:hover) .work-track,.work-list:has(.work-link:focus-visible) .work-link:not(:focus-visible) .work-track{opacity:.2}
.work-thumb,.work-summary{display:none}
.work-stage{position:fixed;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.work-window{position:relative;width:min(52vw,960px);aspect-ratio:16/9;overflow:hidden;clip-path:inset(50% 0);transition:clip-path .75s var(--ease-out)}
.work-stage.is-on .work-window{clip-path:inset(0)}
.work-plane{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.14;filter:brightness(.78);transition:opacity .45s var(--ease),scale 1.2s var(--ease-out)}
.work-plane.is-active{opacity:1;scale:1}
/* GSAP owns the wrapper's transform (x/y). The disc inside owns its own centring and scale:
   GSAP folds the translate and scale properties of anything it animates into its matrix,
   which froze this at scale 0 the first time it was written as one element. */
.work-cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none}
.work-cursor span{display:flex;align-items:center;justify-content:center;width:106px;height:106px;border-radius:50%;background:#1a1a18;color:#f3f1eb;box-shadow:inset 0 0 0 1px #f3f1eb;font-size:12px;translate:-50% -50%;scale:0;transition:scale .4s var(--ease-out)}
.work-cursor.is-on span{scale:1}
.work-cursor span::after{content:'↗';margin-left:.35em}
.cursor-live [data-work]{cursor:none}
html:not(.cursor-live) .work-cursor,html[data-motion="off"] .work-cursor{display:none}
html[data-motion="off"].cursor-live [data-work]{cursor:pointer}

/* Case study */
.case-page .header{position:relative;z-index:30}
.case-hero{max-width:1600px;margin-inline:auto;padding:clamp(40px,6vw,90px) 48px clamp(36px,4.5vw,70px)}
.case-kicker{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:11px;text-transform:uppercase;letter-spacing:.045em;color:var(--muted);margin-bottom:26px}
.case-kicker a{color:var(--text);border-bottom:1px solid var(--border)}
.case-hero h1{font-size:clamp(52px,11vw,206px);line-height:.94;letter-spacing:-.07em}
.case-kind{margin-top:20px;font-size:clamp(16px,1.5vw,22px);letter-spacing:-.03em;color:var(--muted)}
.case-cover-frame{aspect-ratio:16/9;max-height:92svh;width:100%;overflow:hidden;background:#0f0f0e}
.case-cover{width:100%;height:100%;object-fit:cover}
.case-intro{max-width:1600px;margin-inline:auto;padding:clamp(70px,9vw,140px) 48px;display:grid;grid-template-columns:1.25fr 1fr;gap:60px 110px}
.case-story p{font-size:16px;line-height:1.7;color:var(--muted);max-width:58ch}
.case-story p+p{margin-top:24px}
.case-story .case-lead{font-size:clamp(21px,2vw,29px);line-height:1.38;letter-spacing:-.035em;color:var(--text);max-width:32em}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:44px 40px;align-content:start}
.case-facts h2,.case-outcome h2{font-size:11px;font-weight:400;line-height:1.4;text-transform:uppercase;letter-spacing:.045em;color:var(--muted);margin-bottom:14px}
.case-facts ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.9}
.case-block{position:relative}
.case-toned{background:var(--tone);color:var(--tone-ink)}
.case-laptop{display:grid;place-items:center;overflow:hidden;padding:clamp(48px,9svh,110px) clamp(40px,9vw,170px)}
.case-set{position:absolute;inset:0}
.case-set img{width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.5);scale:1.2}
/* Sized by the height of the screen as well as its width: the whole laptop, base included,
   has to be on screen at once (operator, 2026-10-13). 1.6 is the 16:10 screen. */
.device-laptop{position:relative;width:min(88%,980px,calc((100svh - 250px) * 1.6))}
.device-screen{overflow:hidden;background:#000}
.device-screen img,.device-screen video{display:block;width:100%;height:100%;object-fit:cover}
.device-laptop .device-screen{aspect-ratio:16/10;border:clamp(7px,1vw,15px) solid #0b0b0a;border-bottom-width:clamp(9px,1.3vw,20px);border-radius:clamp(10px,1.5vw,22px) clamp(10px,1.5vw,22px) 0 0;box-shadow:0 0 0 1px #3a3a36,0 40px 90px rgb(0 0 0 / .4)}
.device-base{display:block;position:relative;height:clamp(9px,1.25vw,18px);margin-inline:-7%;background:linear-gradient(#d6d5d0,#93928c 68%,#6b6a65);border-radius:0 0 40px 40px / 0 0 16px 16px}
.device-base::after{content:'';position:absolute;left:50%;top:0;width:13%;height:40%;translate:-50% 0;background:#77766f;border-radius:0 0 10px 10px}
.case-statement{max-width:1600px;margin-inline:auto;padding:clamp(100px,16vw,260px) 48px}
.case-statement-text{font-size:clamp(46px,10.4vw,186px);line-height:.96;letter-spacing:-.07em}
.case-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.case-line>span{display:block}
.case-line+.case-line{color:var(--case-accent)}
.case-montage{height:clamp(380px,92vh,1000px);overflow:hidden;background:#0f0f0e}
.case-montage-plane{position:absolute;left:50%;top:50%;width:132%;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.7vw,28px);translate:-50% -50%;rotate:-13deg;transform:skewX(11deg)}
.case-montage-column{display:grid;gap:clamp(12px,1.7vw,28px);align-content:start}
.case-montage-column:nth-child(2){margin-top:-19%}
.case-montage img{width:100%;border-radius:6px;box-shadow:0 22px 50px rgb(0 0 0 / .5)}
.case-phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,4.6vw,84px);overflow:hidden;padding:clamp(64px,10vw,170px) 48px}
.device-phone{flex:none;width:min(27%,300px)}
.device-phone:nth-child(2){margin-top:clamp(36px,7vw,120px)}
.device-phone .device-screen{aspect-ratio:390/844;border:clamp(5px,.7vw,10px) solid #0b0b0a;border-radius:clamp(20px,3.2vw,46px);box-shadow:0 0 0 1px #3a3a36,0 34px 70px rgb(0 0 0 / .32)}
.case-duo{max-width:1600px;margin-inline:auto;padding:clamp(60px,8vw,130px) 48px;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:clamp(16px,2.6vw,44px)}
.case-duo .case-tile:nth-child(2){margin-top:clamp(40px,9vw,150px)}
.case-tile{margin:0;overflow:hidden;border-radius:4px;background:#0f0f0e}
.case-tile img,.case-tile video{display:block;width:100%;height:auto}
.case-caption{grid-column:1/-1;font-size:13px;color:var(--muted);max-width:56ch}
.case-film{max-width:1360px;margin-inline:auto;padding:clamp(60px,8vw,130px) 48px}
.case-film .case-caption{margin-top:18px}
.case-wide{max-width:1600px;margin-inline:auto;padding:clamp(40px,6vw,100px) 48px clamp(60px,8vw,130px)}
.case-outcome{max-width:1600px;margin-inline:auto;padding:clamp(70px,9vw,150px) 48px;display:grid;grid-template-columns:1fr 2fr;gap:20px 110px;border-top:1px solid var(--border)}
.case-outcome p{font-size:clamp(20px,2vw,28px);line-height:1.42;letter-spacing:-.035em;max-width:34em}
.case-outcome .text-link{grid-column:2;justify-self:start;margin-top:16px}
.case-next{display:block;position:relative;overflow:hidden;min-height:max(420px,64vh);padding:64px 48px 90px;border-top:1px solid var(--border)}
.case-next-label{font-size:11px;text-transform:uppercase;letter-spacing:.045em;color:var(--muted)}
.case-next-name{display:block;position:relative;z-index:1;margin-top:26px;font-size:clamp(50px,11vw,206px);line-height:.96;letter-spacing:-.07em}
.case-next-image{position:absolute;right:48px;bottom:64px;width:min(40vw,640px);aspect-ratio:16/9;overflow:hidden;clip-path:inset(50% 0);transition:clip-path .75s var(--ease-out)}
.case-next-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.case-next:hover .case-next-image,.case-next:focus-visible .case-next-image,.case-next.is-leaving .case-next-image{clip-path:inset(0)}

@media (hover:none),(max-width:899px){
  .work-stage{display:none}
  .work-link{padding:26px 0 34px}
  .work-track{display:block;width:auto;padding:14px 36px 0;font-size:clamp(46px,12.5vw,104px);line-height:1;white-space:normal;animation:none}
  .work-name[aria-hidden]{display:none}
  .work-meta{padding-inline:36px;gap:8px 20px;flex-wrap:wrap}
  .work-thumb{display:block;margin:26px 36px 0;aspect-ratio:16/9;overflow:hidden}
  .work-thumb img{width:100%;height:100%;object-fit:cover}
  .work-summary{display:block;padding:18px 36px 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:48ch}
  .work-intro{padding-inline:36px}
  .case-next-image{clip-path:inset(0);position:relative;right:auto;bottom:auto;display:block;width:100%;margin-top:34px}
  .case-next{min-height:0;padding-bottom:64px}
}
@media (max-width:1200px){
  .case-hero,.case-intro,.case-statement,.case-duo,.case-film,.case-wide,.case-outcome,.case-next,.case-phones{padding-inline:36px}
  .case-intro{gap:50px 60px}
}
@media (max-width:767px){
  .work-intro{grid-template-columns:1fr;padding:0 22px 40px}
  .work-index{padding-block:64px 70px}
  .work-track,.work-meta,.work-summary{padding-inline:22px}
  .work-thumb{margin-inline:22px}
  .case-hero,.case-intro,.case-statement,.case-duo,.case-film,.case-wide,.case-outcome,.case-next{padding-inline:22px}
  .case-cover-frame{aspect-ratio:4/3}
  .case-intro,.case-outcome{grid-template-columns:1fr}
  .case-outcome .text-link{grid-column:1}
  .case-laptop{padding-inline:30px}
  .device-laptop{width:min(92%,calc((100svh - 200px) * 1.6))}
  .case-duo{grid-template-columns:1fr}
  .case-duo .case-tile:nth-child(2){margin-top:0}
  .case-phones{padding-inline:14px;gap:10px}
  .device-phone{width:31%}
  .case-montage-plane{width:190%}
}