/* Motion direction adapted from the supplied screen recording: full-bleed
   imagery, editorial image reveals, thin rules, and a photo-backed contact. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
html.wheel-scrolling,html.skip-jump{scroll-behavior:auto!important}
#offer,#approach,#work,#teams{scroll-margin-top:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.progress{width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform}
.site-header{color:var(--white);background:transparent;border-color:rgba(255,255,255,.38);backdrop-filter:none;transition:color .35s ease,background .35s ease,border-color .35s ease}
.site-header.scrolled{background:transparent}
.site-header:not(.on-image),.site-header.scrolled:not(.on-image){color:var(--ink);background:rgba(234,233,226,.96);border-color:rgba(30,33,30,.22);backdrop-filter:blur(18px)}
.site-header .wordmark-mark{border-color:currentColor}
.site-header .mobile-nav{color:var(--ink)}
html:not(.js) .site-header{position:absolute}
.hero{position:relative;display:block;height:100svh;min-height:42rem;padding:0;isolation:isolate;background:#35312b;color:var(--white);overflow:hidden}
.hero-slides,.hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(1.065);transition:opacity 1.05s ease,transform 7s linear;will-change:opacity,transform}
.hero-slide.is-active{opacity:1;transform:scale(1)}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.78)}
.hero-slide:nth-child(2) img{object-position:center 51%;filter:brightness(.83) saturate(.82)}
.hero-slide:nth-child(3) img{object-position:center 51%}
.hero-shade{z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.37) 0%,rgba(0,0,0,.06) 32%,rgba(0,0,0,.14) 58%,rgba(0,0,0,.67) 100%)}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:clamp(7rem,14vh,10rem) var(--gutter) clamp(1.4rem,3vh,2.7rem)}
.hero-topline{display:flex;justify-content:space-between;gap:2rem;align-items:center;color:var(--white);font-size:.7rem}
.hero-main{max-width:95rem;margin-top:auto;transform:translate3d(0,var(--hero-shift,0px),0);will-change:transform}
.hero-pretitle{margin:0 0 1.3rem;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.hero h1{margin:0;font-size:clamp(6rem,12.4vw,16rem);font-weight:600;line-height:.75;letter-spacing:-.105em;text-transform:uppercase;color:var(--white)}
.hero h1 span{display:block}
.hero h1 span:last-child{padding-left:clamp(1.2rem,7.6vw,8rem);white-space:nowrap}
.hero h1 em{font-family:Georgia,serif;font-size:.75em;font-weight:400;line-height:1;text-transform:none;letter-spacing:-.11em;color:#e8c4ad}
.hero-intro{max-width:33rem;margin:clamp(1.6rem,3vh,2.8rem) 0 0;font-size:clamp(1.05rem,1.65vw,1.5rem);line-height:1.25;letter-spacing:-.035em}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:2rem;width:100%;margin-top:clamp(1.5rem,4vh,3rem);padding-top:.9rem;border-top:1px solid rgba(255,255,255,.7)}
.hero-credit{display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(.75rem,2.5vw,3rem);min-height:2rem;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hero-credit>*{display:inline-block;animation:hero-meta-in .6s var(--ease-out) both}
@keyframes hero-meta-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hero-credit .hero-project{font-size:clamp(.75rem,1.1vw,1.1rem);letter-spacing:.02em;text-transform:none}
.hero-credit .hero-case-link{border-bottom:1px solid currentColor;padding-bottom:.15rem;letter-spacing:.08em;white-space:nowrap}
.hero-credit .hero-case-link:hover{opacity:.72}
.hero-credit .hero-case-link[hidden]{display:none!important}
.hero-actions{display:flex;align-items:center;gap:clamp(1.2rem,3vw,3rem)}
.hero-controls{display:flex;gap:.45rem}
.hero-controls button{display:grid;place-items:center;width:2.7rem;height:2.7rem;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:transparent;color:var(--white);cursor:pointer;transition:background .25s ease,color .25s ease,transform .25s ease}
.hero-controls button svg,.hero-discover svg{display:block;width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-controls button:hover{background:var(--white);color:var(--ink);transform:scale(1.06)}
.hero-discover{display:flex;align-items:center;gap:1rem;white-space:nowrap;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hero-discover span{display:grid;place-items:center;width:2.7rem;height:2.7rem;border:1px solid rgba(255,255,255,.65);border-radius:50%;transition:transform .3s var(--ease-out),background .3s ease,color .3s ease}
.hero-discover:hover span{transform:translateY(5px);background:var(--white);color:var(--ink)}
.intro-panel{position:relative}
.intro-panel::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:rgba(234,233,226,.28)}
.pathway{position:relative;transition:padding .45s var(--ease-out),background .45s ease}
.pathway h3{transition:transform .45s var(--ease-out),color .3s ease}
.pathway h3::after{content:"↗";display:inline-block;margin-left:.5em;font-size:.45em;vertical-align:middle;opacity:0;transform:translate(-.5em,.5em);transition:opacity .3s ease,transform .4s var(--ease-out)}
.pathway:hover h3{transform:translateX(.3rem);color:var(--accent)}
.pathway:hover h3::after{opacity:1;transform:translate(0,0)}
.image-interlude{height:78svh;min-height:36rem;margin:0;isolation:isolate}
.interlude-media{position:absolute;inset:0;overflow:hidden}
.image-interlude img{width:100%;height:100%;object-fit:cover;object-position:center 47%;filter:saturate(.82);transform:scale(1.1) translate3d(0,var(--interlude-y,0px),0);will-change:transform}
.interlude-word{position:absolute;z-index:1;left:-.05em;bottom:-.17em;color:var(--white);font-size:clamp(7rem,17vw,25rem);font-weight:600;line-height:1;letter-spacing:-.1em;white-space:nowrap;pointer-events:none;transform:translate3d(var(--interlude-x,0px),0,0)}
.image-interlude figcaption{z-index:2;bottom:1.2rem;background:rgba(234,233,226,.94)}
.process-grid{display:block;border-left:0}
.process-step{position:relative;display:grid;grid-template-columns:.27fr 1fr;align-items:center;min-height:0;padding:2.2rem 1rem 2.2rem 0;border-right:0;transition:background .4s ease,padding .4s var(--ease-out)}
.process-step:hover{padding-left:1rem;background:rgba(255,255,255,.24)}
.process-step>div{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2.5rem}
.process-step h3{max-width:none;font-size:clamp(1.75rem,3.4vw,3.5rem);transition:transform .4s var(--ease-out)}
.process-step:hover h3{transform:translateX(.35rem)}
.process-step p{max-width:28rem;margin:0;font-size:clamp(.86rem,1vw,1rem)}
.work{overflow:hidden}
.work-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,5vw,5rem) clamp(1.2rem,3vw,3.5rem)}
.work-word{grid-column:1/-1;margin:0 0 -.04em -.055em;color:var(--ink);font-size:clamp(6rem,14vw,20rem);font-weight:600;line-height:.9;letter-spacing:-.105em;white-space:nowrap;transform:translate3d(var(--work-x,0px),0,0);pointer-events:none}
.case:nth-child(n){grid-column:auto;margin:0}
.case:first-of-type,.case:last-of-type{grid-column:1/-1}
.case-media{position:relative;isolation:isolate;overflow:hidden}
.case-media img,.case:nth-child(2) .case-media img,.case:nth-child(5) .case-media img{width:100%;height:auto;aspect-ratio:1.22;object-fit:cover;filter:saturate(.87);transform:scale(1.07);transition:transform 1.2s var(--ease-out),filter .6s ease}
.case:first-of-type .case-media img,.case:last-of-type .case-media img{aspect-ratio:1.85}
.case-media::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(16,20,18,.22);opacity:0;transition:opacity .45s ease}
.case-overlay{position:absolute;z-index:2;top:50%;left:50%;width:max-content;max-width:80%;padding:.7rem 1rem;border:1px solid rgba(255,255,255,.8);border-radius:3rem;color:var(--white);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-align:center;text-transform:uppercase;opacity:0;transform:translate(-50%,-40%);transition:opacity .4s ease,transform .5s var(--ease-out);pointer-events:none}
.case:hover .case-media::after,.case:focus-visible .case-media::after{opacity:1}
.case:hover .case-overlay,.case:focus-visible .case-overlay{opacity:1;transform:translate(-50%,-50%)}
.case:hover img,.case:focus-visible img{transform:scale(1.035);filter:saturate(1)}
.case:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.case-caption{align-items:end;min-height:4.7rem;margin-top:0;padding:1rem 0 .8rem;border-top:0;border-bottom:1px solid var(--ink)}
.case h3{font-size:clamp(1.5rem,2.7vw,3.2rem)}
.case h3::after{content:"↗";display:inline-block;margin-left:.45em;font-size:.55em;vertical-align:middle;transition:transform .35s var(--ease-out)}
.case:hover h3::after,.case:focus-visible h3::after{transform:translate(4px,-4px)}
.case p{margin-top:.65rem}
.portfolio-note{margin-top:clamp(3rem,6vw,6rem)}
.contact{position:relative;display:block;min-height:100svh;margin:0;padding:clamp(7.5rem,13vh,10rem) var(--gutter) clamp(3rem,7vh,6rem);background:var(--ink);color:var(--ink);overflow:hidden;isolation:isolate}
.contact-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.contact-photo::after{content:"";position:absolute;inset:0;background:rgba(21,29,23,.33)}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.1) translate3d(0,var(--contact-y,0px),0);filter:saturate(.74);will-change:transform}
.contact-card{position:relative;z-index:1;display:grid;grid-template-columns:.28fr 1fr;gap:clamp(2rem,4vw,5rem);width:min(100%,83rem);min-height:min(69svh,52rem);margin:0 auto;padding:clamp(1.5rem,4.5vw,4.5rem);background:#e1e3d9;box-shadow:0 2rem 5rem rgba(0,0,0,.12)}
.contact-card .section-index{align-self:start}
.contact h2{margin:-.08em 0 clamp(2rem,4vw,4rem);font-size:clamp(4rem,7.8vw,9rem);line-height:.87}
.contact h2 em{color:var(--accent)}
.contact-main{min-width:0}
.contact-body>p{max-width:18rem;line-height:1.5}
.contact-form{display:grid;gap:1.25rem;min-width:0}
.contact-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.contact-field{display:flex;flex-direction:column;min-width:0}
.contact-field label{display:flex;justify-content:space-between;gap:.5rem;font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;transition:color .2s ease}
.contact-field:focus-within label{color:var(--accent)}
.contact-field label span:not(.field-optional){color:var(--accent)}
.field-optional{color:var(--ink-soft);font-weight:400}
.contact-field input,.contact-field textarea{width:100%;min-width:0;margin:0;padding:.7rem 0 .6rem;border:0;border-bottom:1px solid rgba(30,33,30,.55);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:1rem;line-height:1.4;transition:border-color .2s ease,box-shadow .2s ease}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#777a71;opacity:1}
.contact-field input:focus,.contact-field textarea:focus{outline:0;border-bottom-color:var(--accent);box-shadow:0 2px 0 var(--accent)}
.contact-field textarea{min-height:5.4rem;resize:vertical}
.contact-form-footer{display:grid;gap:.65rem;padding-top:.35rem}
.contact-submit{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.85rem 0 .5rem;border:0;border-top:1px solid var(--ink);background:transparent;color:var(--ink);font-size:clamp(1.2rem,1.6vw,1.7rem);font-weight:500;letter-spacing:-.04em;text-align:left;cursor:pointer;transition:color .25s ease}
.contact-submit span{display:inline-block;transition:transform .3s var(--ease-out)}
.contact-submit:hover{color:var(--accent)}
.contact-submit:hover span{transform:translate(4px,-4px)}
.contact-form-note{max-width:none!important;margin:0!important;color:var(--ink-soft);font-size:.8rem!important;line-height:1.4}
.contact-form-note a{text-decoration:underline;text-underline-offset:.2em}
.contact-photo-credit{position:absolute;z-index:1;right:var(--gutter);bottom:1.25rem;color:var(--white);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.js .reveal{opacity:0;transform:translate3d(0,42px,0);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.js .reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
.js .section-header>.reveal:nth-child(2){transition-delay:.1s}
.js .case.reveal{opacity:1;transform:none;transition:none}
.js .case.reveal .case-media{clip-path:inset(0 0 100% 0);transition:clip-path 1.12s var(--ease-out)}
.js .case.reveal.is-visible .case-media{clip-path:inset(0 0 0 0)}
.js .case.reveal.is-visible .case-media img{transform:scale(1)}
.js .case.reveal.is-visible:hover .case-media img,.js .case.reveal.is-visible:focus-visible .case-media img{transform:scale(1.035)}
.js .case.reveal .case-caption,.js .case.reveal p{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .case.reveal.is-visible .case-caption{opacity:1;transform:none;transition-delay:.18s}
.js .case.reveal.is-visible p{opacity:1;transform:none;transition-delay:.27s}
@media(max-width:900px){
  .site-header .menu-button{border-color:currentColor;color:inherit}
  .hero h1{font-size:clamp(6rem,14vw,10rem)}
  .hero h1 span:last-child{padding-left:5vw}
  .hero-bottom{align-items:flex-end}
  .hero-credit{max-width:28rem}
  .process-step{grid-template-columns:5rem 1fr}
  .process-step>div{gap:1.5rem}
  .contact-card{grid-template-columns:1fr;gap:2.5rem}
  .contact h2{font-size:clamp(4.2rem,10vw,7.5rem)}
  .contact-body{grid-template-columns:.75fr 1.25fr}
}
@media(max-width:640px){
  .hero{min-height:39rem}
  .hero-content{padding:6.2rem var(--gutter) 1.2rem}
  .hero-topline{font-size:.6rem;gap:.7rem}
  .hero h1{font-size:clamp(4rem,18.5vw,7rem);line-height:.81}
  .hero h1 span:last-child{padding-left:.25rem}
  .hero-intro{max-width:20rem;margin-top:1.4rem;font-size:1rem}
  .hero-pretitle{font-size:.61rem}
  .hero-bottom{display:block;margin-top:1.3rem}
  .hero-credit{display:grid;grid-template-columns:3.2rem 1fr;gap:.35rem .5rem;min-height:0;font-size:.6rem}
  .hero-credit .hero-portfolio{grid-column:2}
  .hero-credit .hero-case-link{grid-column:2;justify-self:start}
  .hero-actions{justify-content:space-between;margin-top:1.1rem}
  .hero-discover{font-size:.6rem}
  .hero-controls button,.hero-discover span{width:2.4rem;height:2.4rem}
  .image-interlude{height:64svh;min-height:27rem}
  .interlude-word{left:0;font-size:17vw;bottom:-.12em;transform:none}
  .process-step{grid-template-columns:2.7rem 1fr;padding:1.7rem 0}
  .process-step>div{display:block}
  .process-step h3{font-size:1.75rem}
  .process-step p{margin-top:.55rem}
  .work-gallery{display:block}
  .work-word{margin-bottom:1rem;font-size:14vw;transform:none}
  .case,.case:nth-child(n){margin:0 0 2.8rem}
  .case-media img,.case:nth-child(2) .case-media img,.case:nth-child(5) .case-media img,.case:first-of-type .case-media img,.case:last-of-type .case-media img{aspect-ratio:1.12}
  .case-caption{min-height:0}
  .case h3{font-size:1.6rem}
  .contact{padding:6rem var(--gutter) 3.7rem}
  .contact-card{min-height:0;padding:1.4rem}
  .contact h2{font-size:clamp(3.5rem,14vw,5.5rem)}
  .contact-body{grid-template-columns:1fr;gap:1.6rem}
  .contact-body p{font-size:.9rem}
  .contact-form-row{grid-template-columns:1fr}
  .contact-photo-credit{right:var(--gutter);bottom:.8rem;left:var(--gutter);font-size:.54rem;text-align:right}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide,.hero-slide.is-active,.hero-main,.image-interlude img,.interlude-word,.work-word,.contact-photo img{transform:none!important;transition:none!important;animation:none!important}
  .hero-credit>*{animation:none!important}
  .js .reveal,.js .reveal.is-visible,.js .case.reveal .case-caption,.js .case.reveal p{opacity:1!important;transform:none!important;transition:none!important}
  .js .case.reveal .case-media{clip-path:none!important;transition:none!important}
  .js .case.reveal .case-media img{transform:none!important}
}