@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Explora&family=Inter:wght@400;500;600;750&display=swap');

:root{--paper:#f1efe8;--ink:#161513;--tobacco:#76452f;--note:#f3e694;--edge:clamp(20px,5vw,80px);--display:"Archivo Black","Arial Black",Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.45 Inter,Arial,sans-serif}
a{color:inherit;text-underline-offset:.25em}
a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.skip{position:absolute;z-index:10;top:10px;left:10px;background:var(--paper);padding:10px;transform:translateY(-200%)}
.skip:focus{transform:none}
figure,h1,h2,p{margin:0}
.stage{position:relative;height:100svh;min-height:450px;isolation:isolate;overflow:hidden;background:#e7e7e7}
.photo,.hero-content{position:absolute;inset:0}
.photo{overflow:hidden}
.hero-image{position:absolute;width:min(100%,calc(100svh * 1.95));height:auto;max-width:none;left:50%;top:51%;translate:-50% -50%}
.hero-content{z-index:3;padding:25px var(--edge);display:flex;flex-direction:column;pointer-events:none}
.hero-content a{pointer-events:auto}
.masthead,.hero-foot,.folio{display:flex;justify-content:space-between;align-items:center;gap:20px}
.masthead img{display:block;width:clamp(92px,13vw,155px);height:auto;mix-blend-mode:multiply}
.masthead nav{display:flex;gap:clamp(14px,3vw,44px)}
.masthead a,.hero-foot a{text-decoration:none}
.masthead a:hover,.hero-foot a:hover{text-decoration:underline}
.masthead nav,.hero-foot,.folio,figcaption{font-size:clamp(10px,1.15vw,14px);font-weight:750;text-transform:uppercase;letter-spacing:.075em}
.hero-content h1{margin-top:clamp(35px,7vh,85px);align-self:flex-end;font-family:var(--display);font-size:clamp(23px,4vw,62px);font-weight:900;text-transform:uppercase;line-height:.91;letter-spacing:-.065em}
.hero-foot{margin-top:auto;border-top:1px solid #16151365;padding-top:15px}
.hero-foot a{display:flex;align-items:center;gap:12px}
.hero-foot a span{font-size:21px;line-height:1}
.editorial{position:relative;padding:24px var(--edge) clamp(54px,10vw,140px);background:radial-gradient(ellipse at 14% 15%,#faf8f2 0%,var(--paper) 60%,#e9e6db 100%)}
.folio{padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:clamp(45px,8vw,100px)}
.spread{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(25px,8vw,120px);align-items:center}
.spread+.spread{margin-top:clamp(88px,15vw,210px)}
.print{position:relative;background:#fbfaf6;padding:clamp(10px,1.7vw,22px);transform:rotate(-3deg);box-shadow:4px 9px 20px #2520132e}
.print::before{content:"";position:absolute;width:104px;height:28px;background:#dfd4adad;top:-9px;left:-16px;transform:rotate(-22deg);clip-path:polygon(2% 2%,99% 0,96% 35%,100% 52%,97% 72%,100% 97%,0 100%,3% 66%,0 44%)}
.print img{display:block;width:100%;height:auto}
.print figcaption{padding-top:10px}
.feature{position:relative}
.feature h2,.contact h2{font-family:var(--display);font-size:clamp(46px,9.9vw,150px);line-height:.82;letter-spacing:-.09em;font-weight:900}
.feature p{max-width:35ch;margin-top:25px}
.note{display:block;width:max-content;max-width:100%;margin:20px 0 0 auto;padding:10px 20px;background:var(--note);font:400 clamp(24px,3vw,40px)/.95 Explora,Georgia,serif;transform:rotate(-7deg);box-shadow:2px 3px 6px #25180d20}
.reverse .print{grid-column:2;grid-row:1;transform:rotate(3deg)}
.reverse .feature{grid-column:1;grid-row:1}
.contact{padding:clamp(55px,9vw,130px) var(--edge);background:var(--ink);color:var(--paper)}
.contact p{font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:26px}
.contact h2{font-size:clamp(49px,10vw,150px);letter-spacing:-.075em}
.contact a{display:inline-block;margin-top:26px}
@media(max-width:650px){
  .hero-image{top:52%;width:111%}
  .hero-content h1{margin-top:14svh}
  .hero-foot{gap:9px}
  .hero-foot a{gap:5px}
  .spread{grid-template-columns:1fr;gap:32px}
  .spread .print,.spread .feature{grid-column:auto;grid-row:auto}
  .print{width:93%;margin-inline:auto}
  .feature h2{font-size:clamp(58px,14vw,95px)}
}
@media(max-height:520px) and (min-width:651px){
  .hero-content{padding-top:14px;padding-bottom:12px}
  .hero-content h1{margin-top:14px;font-size:clamp(23px,3vw,42px)}
}


.hero-content h1{font-size:clamp(23px,3.25vw,54px);margin-top:clamp(32px,5.5vh,70px)}
.hero-intro{max-width:33ch;margin:26px 0 clamp(70px,10vw,140px);font-size:clamp(22px,3.4vw,49px);line-height:1.12;letter-spacing:-.045em}
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(22px,6vw,90px);align-items:end;margin:0 0 clamp(35px,6vw,85px)}
.section-head h2,.faq h2{font-family:var(--display);font-size:clamp(37px,6.5vw,102px);line-height:.86;letter-spacing:-.07em}
.section-head p,.narrow p{max-width:49ch}
.section-head p+p{margin-top:1em}
.feature h3,.inner-title{font-family:var(--display);font-size:clamp(46px,9vw,140px);line-height:.82;letter-spacing:-.085em;font-weight:900;margin:0}
.inner-title{font-size:clamp(30px,4.15vw,66px);text-wrap:balance}
.text-link{display:inline-block;margin-top:20px;font-size:14px;font-weight:750}
.sub-section{margin-top:clamp(65px,11vw,155px);border-top:1px solid #16151375;padding-top:clamp(20px,4vw,48px)}
.narrow h3,.service-list h3{font:900 clamp(20px,2.6vw,39px)/1 var(--display);letter-spacing:-.045em;margin:0 0 12px}
.eyebrow{font-size:12px;font-weight:750;letter-spacing:.075em;margin-bottom:18px}
.gallery{display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:clamp(12px,2.8vw,40px);align-items:center}
.gallery img{display:block;width:100%;height:auto}
.gallery img:nth-child(2){margin-top:18%}
.gallery-leather{grid-template-columns:1.1fr .8fr}
.gallery-leather img:nth-child(3){max-width:78%;justify-self:end}
.section-dark{padding:clamp(50px,9vw,125px) var(--edge);background:var(--ink);color:var(--paper)}
.section-dark .section-head{margin:0}
.info,.inner{padding-top:clamp(50px,9vw,125px)}
.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,4vw,52px)}
.service-list article{border-top:1px solid #16151375;padding-top:18px}
.faq h2{margin-bottom:clamp(25px,4vw,52px)}
.faq details{border-bottom:1px solid #16151375}
.faq details:first-of-type{border-top:1px solid #16151375}
.faq summary{display:flex;gap:18px;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px}
.faq details[open] summary::after{content:"−"}
.faq summary h3{font-size:clamp(16px,2.1vw,24px);margin:0}
.faq details p{max-width:66ch;padding-bottom:20px}
.contact p{max-width:58ch;margin:24px 0 0;font-size:16px;text-transform:none;letter-spacing:normal}
.contact h2{max-width:12ch}
.inside-header{padding:25px var(--edge);border-bottom:1px solid #16151375}
@media(max-width:650px){
  .hero-content h1{margin-top:12svh;font-size:clamp(23px,5.8vw,38px)}
  .section-head,.service-list{grid-template-columns:1fr;gap:18px}
  .feature h3{font-size:clamp(54px,14vw,90px)}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery:not(.gallery-leather) img:last-child{grid-column:span 2;width:70%;justify-self:center}
  .contact h2{font-size:clamp(37px,10.4vw,65px)}
}
@media(max-height:520px) and (min-width:651px){
  .hero-content h1{margin-top:10px;font-size:clamp(23px,2.9vw,39px)}
}

.site-header{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(15px,3vw,44px);background:var(--paper)}
.site-header nav{justify-content:center;flex-wrap:wrap;gap:10px clamp(12px,2vw,28px)}
.site-header nav a[aria-current="page"]{text-decoration:underline}
.site-header .nav-cta,.project-form button{background:var(--ink);color:var(--paper);padding:12px 15px;font-size:12px;font-weight:750;text-transform:uppercase}
.site-header .nav-cta{text-align:center}
.home-hero .stage{height:calc(100svh - 80px)}
.sub-section .gallery{margin-top:clamp(30px,6vw,74px)}
.service-list > div{border-top:1px solid #16151375;padding-top:18px}
.text-hero{max-width:1100px}
.text-hero h1{font:900 clamp(42px,9vw,126px)/.89 var(--display);letter-spacing:-.075em}
.text-hero p{max-width:45ch;margin-top:24px;font-size:clamp(17px,2.4vw,27px)}
.context-links,.footer-contact{display:flex;flex-wrap:wrap;gap:12px 26px}
.context-links{margin-top:26px;font-weight:750}
.about-photo img{display:block;width:100%;height:auto}
.faq-page{margin-top:clamp(35px,7vw,80px)}
.faq-page summary h2{font:750 clamp(17px,2.2vw,25px)/1.25 Inter,Arial,sans-serif;letter-spacing:normal;margin:0}
.contact-secondary{margin-left:24px}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(26px,7vw,95px)}
.contact-layout h2{font:900 clamp(23px,3.6vw,48px)/1 var(--display);letter-spacing:-.05em}
.contact-layout p{margin-top:14px;max-width:52ch}
.project-form:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.project-form label{display:grid;align-content:start;gap:6px;font-size:14px;font-weight:750}
.project-form :is(input,select,textarea){width:100%;min-width:0;border:1px solid #16151375;border-radius:0;background:#fbfaf6;padding:11px;color:var(--ink);font:500 16px/1.35 Inter,Arial,sans-serif}
.project-form textarea{resize:vertical}
.project-form .form-wide{grid-column:1/-1}
.project-form button{justify-self:start;grid-column:1/-1;border:0;cursor:pointer}
.site-footer{display:grid;grid-template-columns:1.1fr 1fr auto;align-items:start;gap:26px;padding:35px var(--edge);border-top:1px solid #16151355;background:var(--paper);font-size:14px}
.site-footer img{display:block;width:105px;height:auto;margin-bottom:14px}
.site-footer p{max-width:32ch}
.site-footer nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.site-footer small{grid-column:1/-1}
@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto;gap:12px 16px;padding-block:15px}
  .site-header nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:8px 16px}
  .site-footer{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .home-hero .stage{height:calc(100svh - 112px)}
  .contact-layout,.project-form:not([hidden]),.site-footer{grid-template-columns:1fr}
  .site-header .nav-cta{font-size:10px}
  .contact-secondary{margin-left:0;display:block!important}
}



.case-editorial{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,5vw,72px);align-items:center;padding-top:clamp(28px,6vw,72px);
  padding-bottom:clamp(28px,6vw,72px);border-top:1px solid var(--ink);
}
.case-art img{display:block;width:100%;height:auto}
.case-copy{border-left:1px solid var(--ink);padding-left:clamp(16px,3vw,44px)}
.case-copy h2{font:900 clamp(32px,5.5vw,86px)/.89 var(--display);letter-spacing:-.075em}
.case-copy p{max-width:34ch;margin-top:16px}
.case-copy ol{list-style:none;counter-reset:detail;margin:24px 0 0;padding:0;border-bottom:1px solid #16151375}
.case-copy li{counter-increment:detail;display:flex;align-items:center;gap:15px;padding:10px 0;border-top:1px solid #16151375;font-size:clamp(15px,2.2vw,29px);font-weight:750;text-transform:uppercase}
.case-copy li::before{content:counter(detail,decimal-leading-zero);color:#b62b24;font-size:12px}
.print-image{position:relative;isolation:isolate}
.folded-print .print-image::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 49.65%,#2a221c23 50%,#ffffff60 50.2%,transparent 50.65%)}
.folded-print::before,.folded-print::after{z-index:1;pointer-events:none}
.folded-print::after{content:"";position:absolute;width:clamp(56px,8vw,104px);height:25px;right:-12px;bottom:6px;background:#dfd4adad;transform:rotate(-27deg);clip-path:polygon(2% 5%,100% 0,96% 42%,99% 60%,95% 100%,0 97%,4% 64%,0 42%)}
@media(max-width:650px){
  .case-editorial{grid-template-columns:1fr}
  .case-copy{border-left:0;border-top:1px solid var(--ink);padding:20px 0 0}
}

.print.paper-photo,.reverse .print.paper-photo{padding:0;background:transparent;box-shadow:none;transform:none}
.print.paper-photo::before{display:none}

/* Scale display type to the width of its column so long words fit whole. */
.feature,.hero-content,.text-hero,.contact,.faq,.case-copy,.service-list>*,.narrow,.contact-layout>section{container-type:inline-size}
.section-head{container-type:inline-size}
h1,h2,h3{overflow-wrap:normal;word-break:normal;hyphens:none}
.hero-content h1{font-size:min(clamp(23px,3.25vw,54px),8.15cqi)}
.feature h3{font-size:min(clamp(34px,8vw,140px),8.15cqi)}
.section-head h2{font-size:min(clamp(37px,6.5vw,102px),6.6cqi)}
.text-hero h1{font-size:min(clamp(42px,9vw,126px),10.5cqi)}
.contact h2{max-width:none;font-size:min(clamp(49px,10vw,150px),11cqi)}
.faq>h2,.case-copy h2{font-size:min(clamp(32px,5.5vw,86px),10.5cqi)}
.narrow h3,.service-list h3,.contact-layout h2{font-size:min(clamp(20px,2.6vw,39px),10cqi)}
@media(max-width:650px){
  .section-head h2{font-size:min(clamp(37px,8vw,65px),10.5cqi)}
  .contact h2{font-size:min(clamp(37px,10.4vw,65px),11cqi)}
}


.client-sequence{
  list-style:none;margin:0;padding:clamp(18px,4vw,50px) 0;
  background:#e4e0dc;
}
.client-entry{
  --photo-width:68%;
  display:grid;grid-template-columns:minmax(70px,1fr) minmax(0,5fr) minmax(70px,1fr);
  align-items:center;column-gap:clamp(8px,2.5vw,28px);
  padding:0 clamp(12px,4vw,50px);
}
.client-entry + .client-entry{margin-top:2px}
.client-entry:nth-child(4n + 2),.client-entry:nth-child(4n){--photo-width:81%}
.client-entry:nth-child(4n + 3){--photo-width:96%}
.client-frame{width:var(--photo-width);max-width:540px;justify-self:center}
.client-frame img{display:block;width:100%;height:auto}
.client-number,.client-caption{
  font-size:clamp(11px,1.15vw,15px);font-weight:750;
  line-height:1.15;letter-spacing:-.025em;text-transform:uppercase;
}
.client-caption{justify-self:start;text-wrap:balance}
@media(prefers-reduced-motion:no-preference){
  .client-sequence.is-interactive .client-frame{
    filter:grayscale(1);transform:scale(.98);
    transition:filter .35s ease,transform .35s ease;
  }
  .client-sequence.is-interactive .client-caption{
    opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease;
  }
  .client-sequence.is-interactive .client-entry.is-active .client-frame{filter:none;transform:scale(1)}
  .client-sequence.is-interactive .client-entry.is-active .client-caption{opacity:1;transform:none}
}
@media(max-width:650px){
  .client-entry{
    grid-template-columns:35px minmax(0,1fr) 70px;
    column-gap:6px;padding-inline:6px;
  }
  .client-entry:nth-child(n){--photo-width:88%}
  .client-entry:nth-child(4n + 2),.client-entry:nth-child(4n){--photo-width:94%}
  .client-entry:nth-child(4n + 3){--photo-width:100%}
  .client-number,.client-caption{font-size:10px}
}

.client-spread{
  display:grid;
  grid-template-columns:repeat(20,minmax(0,1fr));
  grid-template-rows:auto;
  gap:0;align-items:start;isolation:isolate;container-type:inline-size;
  max-width:960px;margin-inline:auto;
  padding:clamp(14px,3vw,40px) clamp(12px,6vw,84px);
}
.client-spread + .client-spread{margin-top:0;padding-top:0}
.client-spread .client-frame{width:100%;max-width:none;grid-row:1}
.client-spread .client-frame:nth-child(2){grid-column:11 / 21}
.client-spread .client-frame:nth-child(3){
  grid-column:1 / 13;z-index:1;
  margin-top:40cqi;
  border:clamp(3px,.7vw,9px) solid var(--paper);
}
.client-spread .client-caption{
  grid-column:1 / 11;grid-row:1;justify-self:end;text-align:right;
  margin:22cqi clamp(8px,2vw,26px) 0 0;max-width:15ch;
  font:400 clamp(14px,2.5vw,32px)/1.08 Georgia,serif;
  letter-spacing:-.035em;text-transform:none;
}
.client-kicker{
  display:block;margin-bottom:6px;
  font:750 clamp(9px,1.1vw,13px)/1.15 Inter,Arial,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
}
.client-spread + .client-entry:not(.client-spread){margin-top:clamp(12px,4vw,44px)}

.client-bag .client-frame:nth-child(3){grid-column:1 / 12}

.home-overview .hero-intro{margin-bottom:clamp(42px,7vw,100px)}
.home-services,.home-client-preview{display:grid;gap:clamp(10px,2.5vw,32px)}
.home-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,80px)}
.home-services article{min-width:0;container-type:inline-size}
.service-cover{display:block;position:relative;text-decoration:none}
.service-cover img{display:block;width:74%;height:auto;aspect-ratio:4/5;object-fit:contain}
.service-cover h3{position:absolute;top:5%;left:60%;margin:0;font:900 18cqi/.85 var(--display);letter-spacing:-.085em;text-transform:uppercase}
.service-cover h3 span span{display:block}
.service-cover:hover h3{color:var(--tobacco)}
.home-services p{max-width:35ch;margin-top:12px}
.home-client-preview{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.home-client-preview img{display:block;width:100%;height:auto}
.editorial-button{display:inline-block;margin-top:22px;background:var(--ink);color:var(--paper);padding:12px 15px;font-size:12px;font-weight:750;text-decoration:none}
.editorial-button:hover{text-decoration:underline}
.home-next .section-head{margin-bottom:0}
.text-hero+.client-sequence{margin-top:clamp(28px,6vw,76px)}
.process-options{display:flex;flex-wrap:wrap;gap:12px 26px;font-weight:750;margin-bottom:26px}
.process-route{border-top:1px solid var(--ink);padding-top:22px;margin-top:24px}
.process-route h3{font:900 clamp(23px,4vw,48px)/1.05 var(--display);letter-spacing:-.055em;margin:0 0 18px}
.process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;counter-reset:process;gap:20px;padding:0;margin:0}
.process-steps li{min-width:0;counter-increment:process;border-bottom:1px solid #16151375;padding-bottom:18px}
.process-steps h4{font-size:clamp(15px,2vw,23px);line-height:1.15;margin:12px 0 6px}
.process-steps h4::before{content:counter(process,decimal-leading-zero) " / ";color:#a92c25}
.process-art{position:relative;overflow:hidden;aspect-ratio:var(--art-ratio);background:#f0ede5}
.process-art img{position:absolute;width:var(--art-width);max-width:none;height:auto;left:var(--art-left);top:var(--art-top)}
.process-adapt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center}
.process-adapt ol{padding-left:1.3em}
.process-adapt li+li{margin-top:8px}
.process+section+.case-editorial{margin-top:42px;padding-inline:0}
@media(max-width:650px){
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .process-adapt{grid-template-columns:1fr}
}
@media(max-width:560px){
  .home-services{grid-template-columns:1fr;gap:30px}
}

.service-hero{max-width:880px;margin-inline:auto;container-type:inline-size}
.service-hero-cover{position:relative}
.service-hero-cover img{display:block;width:60%;height:auto;aspect-ratio:4/5;object-fit:contain}
.service-hero-word{position:absolute;top:50%;left:55%;translate:0 -50%;font:900 19cqi/.83 var(--display);letter-spacing:-.085em;text-transform:uppercase;text-align:center}
.service-hero-word span{display:block}
.service-hero-label{display:block;margin-top:20px;font:750 clamp(13px,2.2cqi,21px)/1.2 Inter,Arial,sans-serif;text-transform:uppercase}
.service-hero-intro{max-width:55ch;margin-top:12px}
